jquery - 如何使 jQuery 悬停事件不排队？

Question

我有一个 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。他们都这样做。

Answer 1

使用.stop()

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

Answer 2

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

hoverIntent 插件