如何在执行新的动画之前停止Jquery中的所有先前动画？

我只是在尝试使用JQuery。

我有一个图像，当mouseOver()出现时淡入另一个图像并在mouseOut()上淡化

它的效果很好，除非你将鼠标一次又一次地移动到链接上，比如5次，图像反复淡入淡出，5次，而你只是坐在那里等待它克服这种疯狂的行为。

为了阻止这种行为，我尝试使用一个标志并仅在它尚未动画时启动动画，但是，猜猜是什么？ 例如，如果我有4个这样的按钮，并且在每个按钮鼠标hover上我正在淡化在不同的图像中，该动画将被忽略，因为该标志是假的。

那么有没有办法在执行新动画之前停止所有以前的动画？ 我在谈论JQuery中正常的fadeIn()和slideDown()函数

---

编辑：从链接添加代码。

 Tick 

JavaScript的

 function mouseOverOut(t) { if(t) { $('.img1').fadeIn(); $('.img2').fadeOut(); } else { $('.img1').fadeOut(); $('.img2').fadeIn(); } } 

Answer 1

将.stop()与fadeIn/Out会导致不透明度陷入局部状态。

一种解决方案是使用.fadeTo()代替，它为不透明度提供绝对目标。

 function mouseOverOut(t) { if(t) { $('.img1').stop().fadeTo(400, 1); $('.img2').stop().fadeTo(400, 0); } else { $('.img1').stop().fadeTo(400, 0); $('.img2').stop().fadeTo(400, 1); } } 

这是一种较短的写作方式。

 function mouseOverOut(t) { $('.img1').stop().fadeTo(400, t ? 1 : 0); $('.img2').stop().fadeTo(400, t ? 0 : 1); } 

或者这可能有效。 不过要先测试一下。

 function mouseOverOut(t) { $('.img1').stop().fadeTo(400, t); $('.img2').stop().fadeTo(400, !t); } 

编辑：这最后一个似乎工作。 true / false转换为1/0。 您也可以直接使用.animate() 。

 function mouseOverOut(t) { $('.img1').stop().animate({opacity: t}); $('.img2').stop().animate({opacity: !t}); } 

Answer 2

你有没有试过stop（） ？

描述：停止匹配元素上当前正在运行的动画。

Answer 3

使用.stop()