正確的動畫jquery

Question

我有四個塊的圖片，我需要爲它們設置動畫：當你將鼠標放在塊上時，它會下降; 當你把它拿走它上升。現在我有我的鼠標移動非常快塊開始排隊我的行爲和一些次後，似乎這個問題就像他們移動沒有我

JS代碼：

$('.blocks').hover(up, down); 
    function up() { 
      $(this) 
      .animate ({ 
       top: '+=400px'}, 1000); 
    } 

function down() { 
    $(this).delay(300) 
     .animate ({ 
      top: '-=400px'}, 800); 
} 
` 

Answer 1

使用此

$('.blocks').hover(up, down); 

function up() { 
     $(this).stop().animate({ 
      top: '+=400px' 
     }, 1000); 
} 

function down() { 
     $(this).stop().delay(300).animate({ 
      top: '-=400px' 
     }, 800); 
} 

Answer 2

您需要排隊一個新的動畫來避免這個問題之前，停止你的動畫。您可以使用它通過的MouseEnter觸發或懸停事件jQuery的.animate（）函數時，在http://api.jquery.com/stop/

Answer 3

這是很常見的找到更多的細節。這一切都很好，但這意味着我們需要考慮多次觸發的事件。

解決方案： 使用jQuery的stop（）函數docs

例子：

$('.blocks').hover(up, down); 

function up() { 
    $(this).stop().animate ({ top: '+=400px' }, 1000); 
} 

function down() { 
    $(this).stop().delay(300).animate ({ top: '-=400px'}, 800); 
} 

克里斯Coyier已經撰寫了有關如何應對這樣的好文章。
http://css-tricks.com/full-jquery-animations/