如何在jQuery中停止以前的dom元素动画

Question

我正在尝试通过jquery使用动画。 当我将鼠标悬停在元素上时，它会增加高度，而当鼠标移出时，会返回到原始高度。

问题是当我将鼠标从一个元素移到另一个元素时，前一个元素的动画仍在执行。 如何停止上一个元素的动画？

小提琴代码：

http://jsfiddle.net/EVZVQ/

Answer 1

使用.stop() ： http : .stop()

$('.div_1').mouseover(function(){

    $(this).stop().animate({'height':'200px'},2000);
}).mouseout(function(){

    $(this).stop().animate({'height':'100px'},2000);
});

注意，您可以链接事件绑定函数，而不必.div_1两次选择.div_1 。

这是一个演示： http : //jsfiddle.net/EVZVQ/1/

在元素上调用.stop（）时，当前正在运行的动画（如果有）立即停止。 例如，如果在调用.stop（）时使用.slideUp（）隐藏了某个元素，则该元素现在仍会显示，但只是其先前高度的一小部分。 不调用回调函数。

资料来源： http ： //api.jquery.com/stop

更新资料

您可以像这样立即停止所有div（但是我不确定这是否是您想要的效果）：

var $divs = $('.div_1');
$divs.mouseover(function(){

    $divs.stop().filter(this).animate({'height':'200px'},250);
}).mouseout(function(){

    $divs.stop().filter(this).animate({'height':'100px'},250);
});

这是一个演示： http : //jsfiddle.net/EVZVQ/2/

Answer 2

这样效果更好。

$('.div_1').mouseover(function(){
    $(this).stop(true).animate({'height':'200px'},200);
});

$('.div_1').mouseout(function(){
    $(this).stop(true).animate({'height':'100px'},200);
});

http://jsfiddle.net/diode/EVZVQ/7/