隐藏或显示 div，悬停时销毁功能答案

【问题标题】：hide or show div, destroy function on hover隐藏或显示 div，悬停时销毁功能
【发布时间】：2015-05-06 21:19:13
【问题描述】：

我正在尝试解除对悬停事件的特定功能的绑定。一个 div 会在页面加载时显示并在 5 秒后淡出，除非将鼠标悬停在该 div 上。

为什么函数没有被破坏？我试过：.off，销毁

代码：

function fadeOutshowBox (){

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

}



fadeOutshowBox ();

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

        $(this).unbind(fadeOutshowBox);

});

感谢大家的帮助。

【问题讨论】：

是的，fadeOut 动画必须停止

标签： jquery function hover

【解决方案1】：

如果我理解正确，您只想为 div 设置动画，以防它没有悬停 5 秒。

在这种情况下，这应该可以解决问题：

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

var handle = fadeOutshowBox();

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

http://jsfiddle.net/axbccfuv/

【讨论】：

这正是我想要的。非常感谢@Johan
@user2666378 很高兴 - 很高兴我能提供帮助！

【解决方案2】：

你可以试试

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

        $(this).fadeToggle();

});

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

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

【讨论】：

【解决方案3】：

fadeOutshowBox 根本没有绑定。解除绑定没有任何作用。

这个怎么样：定义函数fadeOutshowBox，它会淡出（没有延迟），然后在setTimeout（或延迟）之后调用该函数。同时，如果用户悬停，fadeOutshowBox 可以重新定义为什么都不做。

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

setTimeout(fadeOutshowBox,5000);

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

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

【讨论】：

【解决方案4】：

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

【讨论】：