.mouseleave 事件中的 .delay 函数答案

【问题标题】：.delay function in a .mouseleave event.mouseleave 事件中的 .delay 函数
【发布时间】：2014-04-22 22:25:15
【问题描述】：

所以我试图为鼠标离开事件添加延迟，这样如果一个鼠标悬停在元素的边缘，它就不会出现故障

$(window).load(function(){
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseenter(function () {
    $("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
        bottom: 75
    });
});
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseleave(function () {
    .delay(10)//Have a delay here
    $("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
        bottom: -75
    });
});
});

有什么想法吗？？

【问题讨论】：

标签： javascript jquery menu hover

【解决方案1】：

我使用这个插件，在避免“意外悬停”方面做得很好

http://cherne.net/brian/resources/jquery.hoverIntent.html

【讨论】：

【解决方案2】：

在 mouseleave 事件中，您可以使用 setTimeout 来延迟函数的执行。捕获从 setTimeout 函数返回的 id 可以防止该函数使用 clearTimeout 执行。因此，如果用户在延迟结束之前将鼠标放回该区域，该元素将不会执行 mouseleave 动画。

$(document).ready(function(){
    var timeoutID ;

    $("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseenter(function () {
        // Don't execute the hide function if it hasn't executed
        clearTimeout( timeoutID );
        $("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
            bottom: 75
        });
    });
    $("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseleave(function () {
        timeoutID  = setTimeout(function(){
            $("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
                bottom: -75
            });
        }, 1000) // Delay 1000 milliseconds
    });
});

这是一个小提琴：http://jsfiddle.net/t829p/3/

关于 setTimeout 和 clearTimeout 函数的文档：

https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout

https://developer.mozilla.org/en-US/docs/Web/API/window.clearTimeout

【讨论】：