jQuery：中断fadeIn（）/ fadeOut（）

Question

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

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

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

Answer 1

[stop()将仅删除尚未执行的动画。

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

Answer 2

通过使用.stop（true，false）清除队列，但不会跳到最后，您将获得平滑的fadeIn / Out效果，但是请注意，由于FadeIn可以通过这种方式中断，因此FadeOut不能。我像几年前一样，将其报告为错误，但没有人关心。 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之后才被调用的原因是，动画是以类似队列的方式执行的。]

Answer 4

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

Answer 5

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

Answer 6

另一个工作示例

Answer 7

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

Answer 8

尝试从队列中取出动画。