Question

我正在做这样的事情http://jsfiddle.net/8ErSL/2/

当您悬停任何文本框（div）时，其中会出现一个小图标。

我想阻止图标的淡入淡出效果重复多次，因为我意外地将鼠标悬停在div上，你知道这有点烦人。我知道有一种方法可以通过添加.stop()来防止这种情况，它就像一个魅力。

但是当我尝试通过添加.delay(500)来延迟图标的外观时，.stop()已经变得无用，并且当您继续在div中移动光标时，淡入淡出效果会不断重复。

如何覆盖此问题？我需要延迟并防止重复的淡入淡出效果。

由于

Answer 1

请阅读：http://forum.jquery.com/topic/stop-does-not-clear-delay

http://bugs.jquery.com/ticket/6255

这可能会有所帮助：delay() or timeout with stop()?

据我了解，stop（）无法清除延迟。这是来自   有关延迟的文件;

.delay（）方法最适合在排队的jQuery之间延迟   效果。因为它是有限的 - 例如，它没有提供一种方法   取消延迟-.delay（）不是JavaScript本机的替代品   setTimeout函数，可能更适合某些用途   例。

同样在案件中，我完全误解了您的问题，请知道:)将删除此帖子。希望这有帮助

Answer 2

我想你可以尝试这样的事情。

var $prev;   
$(".codebox").hover( function() {
   var $icon = $(".icon", this);
   if ($prev) {
      $prev.stop(true)
           .delay(500).fadeOut('fast'); // so animation will be shown here as well
   }        
   $icon.delay(500).fadeIn("fast");
   $prev = $icon;
}, function() {
   $(".icon", this).delay(500).fadeOut("fast");
} );

Demo

关键是当鼠标进入另一个块时，我们强制隐藏块的图标。我们不能在“离开”时这样做（因为当鼠标离开一个区域时它会弄乱我们的动画，而不是去另一个区域），但是如果我们存储'previous'，我们可以在下一个'enter'事件中执行它某种缓存中的图标。

更新还有另外一个，更多simple way：

$(document).ready( function () {
    $(".codebox").hover( function() {
       $(".icon", this).delay(500).fadeIn("fast");
    }, function() {
       $(".icon", this).stop(true).delay(500).fadeOut("fast");
    } );
});

...如果您不介意当鼠标刚刚通过时，该块将不会被突出显示。）

jQuery：使用.stop（）的.delay（）会使.stop（）无效。为什么？

2 个答案: