JS/jQuery - 当我再次启动 MouseOver 时重置 MouseLeave答案

【问题标题】：JS/jQuery - Reset MouseLeave when I Start MouseOver againJS/jQuery - 当我再次启动 MouseOver 时重置 MouseLeave
【发布时间】：2012-03-27 08:06:03
【问题描述】：

$("#profile_bar").mouseover(function()
{
    $("#profile_bar")stop(true).animate({
        marginTop : "0px"
    }, 300);
});

$("#profile_bar").mouseleave(function()
{
    $("#profile_bar").stop(true).delay(2000).animate({
        marginTop : "-70px"
    }, 300);
});

目前我有你在上面看到的代码。我想要发生的是：

当我将 div #profile_bar 悬停时，它会向下移动 70 像素。当我离开那个 div 并在 2 秒内回到它时，它必须停止 MouseLeave 功能，实际上什么都不会发生。

有人可以给我提示或帮助我吗？

【问题讨论】：

标签： javascript jquery html jquery-animate mouseover

【解决方案1】：

尝试在您的mouseover 上使用clearQueue，这将删除排队等待稍后执行的所有效果，这样mouseleave 动画就不会发生。

编辑： 我在 jsFiddle 上测试了我的建议，发现使用 clearQueue 与否之间没有区别。然后我看到api docs 说（强调我的）：

.delay() 方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，它可能更适合某些用途案例。

所以，AlienWebguy 的答案就是你真正需要的……

【讨论】：

感谢您的解释和帮助我解决这个问题！

【解决方案2】：

var timeouts = {};
$("#profile_bar").mouseover(function()
{
    clearTimeout(timeouts['profile_bar']);
    $("#profile_bar").stop(true).animate({
        marginTop : "0px"
    }, 300);
});

$("#profile_bar").mouseleave(function()
{
    timeouts['profile_bar'] = setTimeout(function(){
        $("#profile_bar").stop(true).animate({
            marginTop : "-70px"
        }, 300);
    }, 2000);
});

【讨论】：