jQuery:将 .delay() 与 .stop() 一起使用会使 .stop() 无用。为什么？

Question

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

当您将鼠标悬停在任何文本框 (div) 上时，其中会出现一个小图标。

我想阻止图标的淡入淡出效果在我不小心将鼠标悬停在 div 上时多次重复，你知道这有点烦人。我知道有一种方法可以通过添加 .stop() 来防止这种情况发生，而且它的效果非常好。

但是当我尝试通过添加 .delay(500) 来延迟图标的出现时，.stop() 变得毫无用处，并且淡入淡出效果不断重复您不断在 div 之间移动光标。

如何解决这个问题？我需要延迟并防止重复的淡入淡出效果。

谢谢

Answer 1

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

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 .

重点是，当鼠标进入另一个 block 时，我们强制隐藏 block 的图标。我们不能在“离开”时执行此操作(因为当鼠标刚刚离开一个区域而不是到达另一个区域时，它会弄乱我们的动画)，但如果我们存储“上一个”事件，我们可以在下一个“进入”事件中执行此操作某种缓存中的图标。

更新还有另一个，更多simple way :

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

...如果您不介意的话，当鼠标刚刚穿过该 block 时，该 block 根本不会突出显示。 )