一旦它开始,你如何取消jQuery fadeOut()？

Question

我有一个基本的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);
});

Answer 1

检查停止功能

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

Answer 2

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

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

Answer 3

就我而言，仅仅使用stop()是行不通的（至少在 Firefox 中），搜索后我发现它应该是stop(true, true)：

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

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

或者甚至你可以使用finish()：

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

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

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

在这里阅读更多内容。