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

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