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

Question

我有一个div,当我将鼠标悬停在它上面时,它内部的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");    
    }
);?