我怎样才能忽略一段时间的jQuery动画？

Question

实施例：

http://jsfiddle.net/patrioticcow/XnnvD/4/

即使用延迟来延迟针对位动画但是当用户用鼠标悬停在黑色图像几次出现该问题，动画将记住接着说。

这是一个有趣的效果，但不是我想要的。我希望动画不会发生，如果用户徘徊几次，让我们说在一秒钟左右。

Answer 1

如果您的意图是延迟动画，直到鼠标的速度意味着有意悬停，请查看jQuery HoverIntent plugin。当且仅当鼠标在项目上减速足以暗示悬停时，才能使用此插件触发悬停回调。它可以通过包括它并用.hoverIntent()替换.hover()来调用。

Answer 2

使用jQuery的stop()功能进行调查。

它可以帮助防止动画的“排队”。这似乎是问题所在。

停止的第一个参数是清除队列。

$("#someDiv").hover(function(){ 
    $(this).stop(true, false).up); 
}, function() { 
    $(this).stop(true, false).down); 
}); 

更多实例在Full Cycle of Animation on Hover/Off。

Answer 3

您应该在动画之前使用.stop()以防止动画队列堆积。

prevent-animation-queue-buildup

 $(document).ready(function() { 
      $('ul.anim_queue_example1 a') 
       .hover(function() { 
        $(this).animate({ left: 20 }, 'fast'); 
       }, function() { 
        $(this).animate({ left: 0 }, 'fast'); 
       }); 
     }); 

这里是更新的JavaScript，通过使用.stop（）方法修复了动画队列堆积。

$(document).ready(function() { 
     $('ul.anim_queue_example2 a') 
      .hover(function() { 
       $(this).stop().animate({ left: 20 }, 'fast'); 
      }, function() { 
       $(this).stop().animate({ left: 0 }, 'fast'); 
      }); 
    });