如何修复jQuery悬停中的连续动画

Question

如果您尝试将鼠标悬停在一个绿色框上并将鼠标悬停在一秒钟内5次或更多时间内，您会看到该框呈弹起状态。我想要发生的是，当绿框恢复到原始大小（50px）时，悬停输入将再次启用。所以，只要我做得更快hover-in和hover-out动画看起来不会弹起。
希望你明白我的意思。
这里是我的fiddle

Answer 1

这是因为动画在队列中（不是所有的动画都同时扮演）如果移动速度非常快，大量的动画是排队，并在时间顺序播放推。这是一种正常的行为。

如果您想解决这个问题，您需要在每次开始另一个动画时清空动画队列。

使用此代码，你将有你期待

$img.hover(
     function(){     
      $(this).stop(true).animate({ 
       height: o.contentHeight, 
       width: o.contentWidth, 
       left: "-=" + leftDistance, 
       top: "-=" + topDistance 
      }, o.speed);     
     }, 
     function(){ 
      $(this).stop(true).animate({ 
       height: o.imageInitHeight, 
       width: o.imageInitWidth, 
       left: "+=" + leftDistance, 
       top: "+=" + topDistance 
      }, o.speed); 
     }    
    ); 

的stop(true)方法将重置未来动画的队列。

当然，这并不能解决整个问题，因为你现在的位置计算会有一个重新解决的问题。

应该检查这个部分，并尝试使用一些更简单的动画

这里是一个工作示例：working example

Answer 2

要解决这样的问题，你可以采取HoverIntent（插件）的优势。

http://cherne.net/brian/resources/jquery.hoverIntent.html

使用简单，该死的灵活。

Answer 3

如果您想使用您现有的代码，并且在完全放大/缩小后（不使用jQuery.stop()）在X时间段内禁用放大/缩小操作，则可以使用data()方法在DOM元素并使用setTimeout()来清除它。在这个例子中，缩小后两个动作都将被禁用1秒（1000毫秒）。

$img.hover(
    function(){ 
     // do not zoom in if currently disabled 
     if (!$(this).data('disabled')){ 
      $(this).animate({ 
       height: o.contentHeight, 
       width: o.contentWidth, 
       left: "-=" + leftDistance, 
       top: "-=" + topDistance 
      }, o.speed); 
     }    
    }, 
    function(){ 
     // do not zoom out if currently disabled 
     if (!$(this).data('disabled')){ 
      // disable zoom in/out by setting 'disabled=true' 
      $(this).data('disabled', true); 
      // alias this to a variable 
      var $this = $(this); 
      // use setTimeout to clear the variable after 1000ms 
      setTimeout(function(){ $this.data('disabled', false); }, 1000); 
      $(this).animate({ 
       height: o.imageInitHeight, 
       width: o.imageInitWidth, 
       left: "+=" + leftDistance, 
       top: "+=" + topDistance 
      }, o.speed); 
     } 
    }    
);