2

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

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

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

但是当我试图通过添加来延迟图标的出现时，.delay(500)它.stop()变得无用了，并且随着您在 div 中不断移动光标，淡化效果不断重复。

我怎样才能解决这个问题？我需要延迟和防止重复的淡入淡出效果。

谢谢

4

2 回答 2

0

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

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

这可能会有所帮助：延迟（）或停止（）超时？

据我了解， stop() 无法清除延迟。这是来自关于延迟的文档；

.delay() 方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，这可能更适合某些用例。

另外，如果我完全误解了您的问题，请让我知道:)将删除此帖子。希望这可以帮助

于 2012-07-09T11:38:24.700 回答
0

我想你可以试试这样的。

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");
} );

演示。

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

更新还有另一种更简单的方法：

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

...如果您不介意该块在鼠标刚刚经过时根本不会突出显示。)

于 2012-07-09T11:40:15.720 回答