jQuery fadeOut() 启动后如何取消它？答案

【问题标题】：How do you cancel a jQuery fadeOut() once it has started?jQuery fadeOut() 启动后如何取消它？
【发布时间】：2009-09-14 12:39:20
【问题描述】：

我有一个基本的 div 元素来表示我显示几秒钟然后使用淡出它的消息

$('#message').fadeOut(5000);

如果用户将鼠标悬停在 div 上，我希望能够取消淡出。

如何在fadeOut 方法开始淡出div 后取消淡出？

如果鼠标在显示 div 时进入 div，则下面我现有的代码可以工作，但我需要允许用户将鼠标悬停在 div 上，一旦它开始消失。

$('#message').mouseenter(function() {
  clearTimeout(this.timeout);
});
$('#message').mouseleave(function() {
  this.timeout = setTimeout("$('#message').fadeOut(5000)", 3000);
});
$('#message').fadeIn(2000, function() {
  this.timeout = setTimeout("$('#message').fadeOut(3000)", 3000);
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

查看停止功能

http://docs.jquery.com/Effects/stop#clearQueuegotoEnd

【讨论】：

不错！使用 stop，这会让 mouseenter 函数恢复正常： $(this).stop().animate({opacity:'100'});
我不敢相信我没有在 jQuery 文档中发现那个！一定是星期一。谢谢。
具体来说，@daddywoodland 的 .stop().animate({opacity:'100'}) 组合允许任何淡入/淡出根据您的触发器重新启动。效果很好。
此链接不再有效，这也是 StackOverflow 上不允许单独链接的原因。

【解决方案2】：

此外，您可以使用:animated 选择器测试元素是否在动画中间：

$('#message').mouseover(
    function () {
      if($(this).is(':animated')) {
         $(this).stop().animate({opacity:'100'});
      }
    }
);

【讨论】：

【解决方案3】：

在我的情况下，stop() 至少在 Firefox 中不起作用，经过搜索我发现它应该是 stop(true, true)：

$('#message').mouseover(
    function () {
         $(this).stop(true, true).fadeOut();
    }
);

stop()：在匹配的元素上停止当前正在运行的动画。

甚至你也可以改用finish()：

$('#message').mouseover(
    function () {
         $(this).finish().fadeOut();
    }
);

但是finish()有一个副作用，它也会停止所有其他正在运行的动画。

finish()：停止当前正在运行的动画，移除所有排队的动画，并完成匹配元素的所有动画。

阅读更多here。

【讨论】：

.finish() 对fadeIn() 和元素在发出fadeOut() 后成功。