隐藏或显示div，在悬停时破坏功能

I am trying to unbind a specific function on a hover event. A div is shown on page load and fades out after 5 seconds unless that div has been hovered over.

我试图解除悬停事件的特定功能。在页面加载时显示div,并在5秒后淡出,除非该div已经悬停在上面。

How come the function isn't destroyed? I have tried: .off, destroy

为什么功能没有被破坏?我试过了:.off,毁灭

The code:

function fadeOutshowBox (){

    $('#showBox').delay(5000).fadeOut();

}



fadeOutshowBox ();

$('#showBox').hover (function(){

        $(this).unbind(fadeOutshowBox);

});

Thanks for all the help.

谢谢你的帮助。

4 个解决方案

#1

If I understand you correctly, you only want to animate the div in case it isn't hovered for 5 seconds.

如果我理解正确,你只想动画div,以防万一没有徘徊5秒钟。

In that case, this should do the trick:

在这种情况下,这应该做的伎俩:

function fadeOutshowBox (){
    return setTimeout(function(){
        $('#showBox').fadeOut();
    }, 5000);
}

var handle = fadeOutshowBox();

$('#showBox').hover(function(){
    clearTimeout(handle);
});

http://jsfiddle.net/axbccfuv/

#2

you can try

你可以试试

$('#showBox').hover (function(){

        $(this).fadeToggle();

});

and you can take a look at https://api.jquery.com/unbind/

你可以看看https://api.jquery.com/unbind/

unbind using for unbind event not unbind function

unbind用于unbind事件而不是unbind函数

#3

fadeOutshowBox isn't bound at all. unbinding it doesn't do anything.

fadeOutshowBox根本没有绑定。取消绑定它什么都不做。

How about this: Define the function fadeOutshowBox, which does the fade out (without the delay), and then call that function after a setTimeout (or delay). meanwhile, if the user hovers, fadeOutshowBox can be redefined to do nothing.

怎么样:定义函数fadeOutshowBox,它执行淡出(没有延迟),然后在setTimeout(或延迟)之后调用该函数。同时,如果用户盘旋,fadeOutshowBox可以重新定义为什么都不做。

function fadeOutshowBox() {
    $('#showBox').fadeOut();
}

setTimeout(fadeOutshowBox,5000);

$('#showBox').hover (function(){
    fadeOutshowBox = function(){};
});

I haven't tested it, but I don't see why it wouldn't work.

我没有测试过,但我不明白为什么它不起作用。

#4

You can't cancel a delay function, you should use setTimeout instead https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

你不能取消延迟功能,你应该使用setTimeout而不是https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

#1