Question

所以即时尝试为鼠标离开事件添加延迟，这样如果一个人悬停在元素上边缘就不会出现故障

$(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
    });
});
});

任何想法??

Answer 1

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

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

Answer 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

.mouseleave事件中的.delay函数

2 个答案: