Question

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

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

小提琴代码：

Answer 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（）时，当前正在运行的动画（如果有的话）立即停止。例如，如果有一个元素隐藏.slideUp（）当调用.stop（）时，该元素将立即生效仍然显示，但将是其先前高度的一小部分。不调用回调函数。

来源：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/

如何在jquery中停止前一个dom元素动画

2 个答案:

更新