如何在jquery中停止以前的dom元素动画答案

【问题标题】：How to stop previous dom element animation in jquery如何在jquery中停止以前的dom元素动画
【发布时间】：2012-01-28 01:59:35
【问题描述】：

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

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

小提琴代码：

http://jsfiddle.net/EVZVQ/

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

使用.stop()：http://api.jquery.com/stop

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

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

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

请注意，您可以链接事件绑定函数，而不是连续选择两次.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/

【讨论】：

是的......但是我如何使用 stop 来停止前一个元素的动画......我正在使用 $(this) 到当前元素动画。

【解决方案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/

【讨论】：