jQuery：中断fadeIn（）/ fadeOut（）

假设我已经调用了$ element.fadeIn（200）。 100毫秒后，该页面上发生了一些事情，我想中断淡入淡出并立即fadeOut（）。 我怎样才能做到这一点？

如果调用$ element.fadeIn（200）.fadeOut（0），则fadeOut（）仅在fadeIn（）完成后发生。

另外，有没有办法我可以检查$ element来确定fadeIn（）或fadeOut（）是否正在运行？ $ element是否有任何更改的.data（）成员？

Answer 1

stop()只会删除尚未执行的动画。

使用stop(true, true)来中断和删除当前动画！

Answer 2

使用.stop（true，false）清除队列但不跳到最后，你将获得平滑的淡入/淡出效果，但请注意，由于FadeIn可以通过这种方式中断，FadeOut不能。 我把它报告为像几年前一样的bug，但没有人关心。 FadeIn仅在隐藏对象时有效。 但是有解决方法……使用FadeTo – 它适用于隐藏和部分褪色的对象：

  $('.a').hover(function(){ $('.b').stop(true,false).fadeTo(3000,1); // <- fadeTo(), not FadeIn() (!!!) },function(){ $('.b').stop(true,false).fadeOut(3000); }); 

以下是它的工作原理： http ： //jsfiddle.net/dJEmB/

Answer 3

AFAIK fadeIn和fadeOut同步运行，所以不，我不认为你可以在它们运行时打断它们。 你必须等到它完成执行。

如果在元素上调用stop方法，它将停止所有动画。 直到fadeIn之后fadeIn调用示例中的fadeOut调用的原因是因为动画以类似队列的方式执行。

Answer 4

您可以使用stop（）函数来中断在该特定时刻发生的任何动画。 让我知道这个是否奏效。

Answer 5

在函数的回调中保持处理动画等的函数总是一个很好的做法。 您可以通过在其回调中执行函数来判断fadeIn（）是否已完成，例如：

 $element.fadeIn(200, function(){ //do callback }); 

如果那是不可能的，那么你可以在函数外面声明一个变量。 比如说，var elmFadeInRunning = false。 在调用fadeIn之前将其更改为true，并在fadeIn的回调中将其更改回false。 这样，如果elmFadeInRunning == true，你可以知道它是否仍在运行。

Answer 6

另一个工作实例

 
Yay, I like to fade
 Stop that fade!   

Answer 7

尝试从队列中取出动画。

 $('...').fadeIn(200).dequeue().fadeOut(0); 

http://api.jquery.com/queue/

http://api.jquery.com/dequeue/