Question

$("#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功能，实际上什么都不应该发生。

有人可以给我一些暗示或帮助我吗？

Answer 1

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

Answer 2

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

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

.delay（）方法最适合延迟排队的jQuery效果。因为它是有限的 - 它没有，例如，提供一种取消延迟的方法 - .delay（）不能替代JavaScript的本机setTimeout函数，这可能更适合某些使用例。

所以，AlienWebguy的回答是你真正需要的......

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

2 个答案: