jQuery：中断fadeIn()/fadeOut()

Question

假设我调用了 $element.fadeIn(200)。 100 毫秒后，该页面上发生了一些事情，我想中断淡入淡出并立即淡出（）。 我该怎么做？

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

另外，有没有一种方法可以检查 $element 以确定淡入（）或淡出（）是否正在运行？ $element 是否有任何更改的 .data() 成员？

Answer 1

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

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

Answer 2

使用 .stop(true,false) 可以通过清队列但不跳到最后获得平滑的淡入/淡出效果，但请注意，由于这种方式可以中断淡入，淡出不能。 我像几年前一样将其报告为错误，但没有人关心。 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方法，它将停止所有动画。 示例中的fadeOut调用直到fadeIn之后fadeIn调用的原因是因为动画是以类似队列的方式执行的。

Answer 4

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

Answer 5

将处理动画等的函数保留在函数的回调中始终是一个好习惯。 您可以通过在其回调中执行您的函数来判断淡入（）是否已完成，例如：

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

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

Answer 6

另一个工作示例

<div id="fadediv">Yay, I like to fade</div>
<button id="stopdatfade" >Stop that fade!</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
(function($){ 

    currentfade = $("#fadediv").fadeOut(5000).fadeIn(5000).fadeOut(5000).fadeIn(5000); 
    $('#stopdatfade').on('click', function () { 
        if (typeof currentfade !== 'undefined') { 

            currentfade.stop(true, true);

        } 

    }); 
})(jQuery);
</script>

Answer 7

在.stop(true,true)之前添加.stop(true,true)将中断任何当前动画并立即执行淡入淡出。

$('.saved').stop(true, true).fadeIn().delay(400).fadeOut(4000);

Answer 8

尝试从队列中取出动画。

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

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

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