如何使 jQuery 悬停事件不排队？答案

【问题标题】：How to make jQuery hover events not queue up?如何使 jQuery 悬停事件不排队？
【发布时间】：2012-12-19 20:37:35
【问题描述】：

我有一个 div，当我将鼠标悬停在它上面时，它里面的一个 div 动画，然后当我停止悬停时，它动画回到原来的位置。但是，如果我将鼠标悬停在它上面多次，非常快，那么动画会排队并继续，直到它们完成。示例：我快速将鼠标悬停在 div 上 10 次，当我坐在那里时，div 动画 10 次。我不希望这些动画像这样排队。

这是我的脚本：

$(".call1").hover(
    function(){
        $(".call-label").animate({"bottom": "+=50px"}, "slow");
    },
    function(){
        $(".call-label").animate({"bottom": "-=50px"}, "slow");    
    }
);

我有一个 jsfiddle 来说明我遇到的问题：http://jsfiddle.net/mqpbm/

我也尝试过 .mouseover 和 .mouseout，以及 .mouseenter 和 .mouseleave。他们都这样做。

【问题讨论】：

标签： jquery hover jquery-animate mouseevent

【解决方案1】：

使用.stop()

$(".call1").hover(
    function(){
        $(".call-label").stop().animate({"bottom": "50px"}, "slow");
    },
    function(){
        $(".call-label").stop().animate({"bottom": "0px"}, "slow");    
    }
);

【讨论】：

使用 stop 是最佳实践。但是-=50px 和+=50px 使它可以在未知的 px 值处停止。使用0px 和50px 会更好。 jsfiddle.net/mqpbm/9
当我使用 .stop() 时，div.call-label 往往会偏离其预期位置。关于如何解决这个问题的任何建议？

【解决方案2】：

我过去曾使用 hoverIntent 插件来使悬停更能响应用户的实际意图。它应该对您的目的有用。

hoverIntent plugin

【讨论】：