jquery - 如果鼠标在一段时间内没有位于元素上方，则隐藏元素

Question

我有一个下拉菜单，当鼠标移动到特定链接上时会触发该菜单。如果鼠标离开下拉菜单一段特定时间，我希望该下拉菜单淡出？

可能吗？

这是我用于打开下拉菜单的 jQuery:

$('.cartpopup').css({'display':'none'});
$('.cart-link').bind('mouseenter',function(){
    $('.cartpopup').stop(true, true).show().animate({top: 100}, 200).animate({top: 44}, 500);
});

现在，如果弹出窗口处于非事件状态，例如，如何使弹出窗口自动关闭鼠标在一定时间内未悬停在其上。

Answer 1

如果您使用 setTimeout() 设置计时器，那么您将获得一个返回值，稍后您可以使用该值取消该超时。

例如，如果您有:

var hideTimer = null;
$('.cartpopup').bind('mouseleave', function() {
    hideTimer = setTimeout(function() {
        // Code to hide menu goes here
    }, 1000);
});

然后当鼠标再次进入该项目时，您可以像这样取消计时器:

$('.cartpopup').bind('mouseenter', function() {
    if (hideTimer !== null) {
        clearTimeout(hideTimer);
    }
});

这样，如果鼠标在计时器执行之前重新进入该项目，则该项目将保持可见。