我怎樣才能忽略一段時間的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'); 
      }); 
    });