圖標行上的jQuery波動畫

Question

我的頁面上有一排圖標，當用戶將鼠標懸停在他們身上時，我想創建一個波動畫效果。

我用這個基本的代碼對於初學者：

$('#icons > li') 
    .hover(function() { 
     $(this).animate({ 
      'top': (-1 * hover_distance) 
     }, hover_speed); 
    }, function() { 
     $(this).animate({ 
      'top': 0 
     }, hover_speed); 
    }) 
; 

它看起來OK。但有一個問題：當你將光標瘋狂地移動到圖標上時，每個圖標的動畫隊列變得充滿了許多動作（上，下，上，下，上，下等），並且圖標正在上升，即使停止與圖標進行交互，也會減少很多次。

我希望我的圖標只能完成一個循環（上下），然後停止動畫。我正在尋找一個最優雅（簡單，輕便）的解決方案。你可以不使用stop（），因爲它可以防止「波浪效應」（即當你在圖標上移動一個快速劃線並且它們響應上下移動時，像一個真正的波）。

PPS：這裏的JS-小提琴： http://jsfiddle.net/nZqLy/3/

Answer 1

您可以使用.stop()動畫之前停止當前動畫或.stop(true)取消所有動畫在隊列中。 http://jsfiddle.net/nZqLy/9/

$('#icons > li').hover(function() { 
    $(this).stop(true).animate({ 
    'top': (-1 * hover_distance) 
    }, hover_speed); 
}, function() { 
    $(this).animate({ 
    'top': 0 
    }, hover_speed); 
}); 

Answer 2

我upvoted通過@ jimjimmy1995答案，而只是提供做同樣的動畫的另一種方式，這將是更快，更高效：

$('#icons').on({ 
    mouseenter:function(){ 
     $(this).stop().animate({top:(-1*hover_distance)},hover_speed); 
    }, 
    mouseleave:function(){ 
     $(this).stop().animate({top:0},hover_speed); 
    } 
},'li'); 

的唯一區別是：

1. .on()的使用更透明，但也允許更多的可擴展性（您可以在以後添加更多的事件，如mousemove或其他，如果你想）
2. 代表團從#icons所有li的，而不是讓#icons > li選擇表示動畫綁定只爲每個li應用一次，而不是多次（一次） - 這是最重要的三個轉變
3. 使用本地DOM名稱而不是字符串（top vs 'top'）是最佳做法。對於沒有連字符的單詞來說沒有區別，但是當您開始處理marginTop與'margin-top'時，它會有所不同。

UPDATE

找到了解決方案：

$('#icons').on({ 
    mouseenter:function(){ 
     if(!$(this).is(':animated')){ 
      $(this).animate({top:(-1*hover_distance)},hover_speed); 
     } 
    }, 
    mouseleave:function(){ 
     $(this).animate({top:0},hover_speed); 
    } 
},'li'); 

使用:animated selector檢查，如果該項目是在被動畫進展。 if邏輯將只執行動畫，如果它不是。

jsFiddle to prove it。