jQuery:中断fadeIn()/ fadeOut()

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

如果调用$ element.fadeIn(200).fadeOut(0),则fadeOut()仅在fadeIn()完成后发生。

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

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

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

使用.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/

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

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

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

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

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

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

另一个工作实例

 
Yay, I like to fade

尝试从队列中取出动画。

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

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

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