用文字製作「wave」效果，需要修復bug

Question

This is what I did。
正如你所看到的，當你將文本懸停在文本上時會發生混亂。我想讓波浪效應在第二次懸停後不會弄亂，只有在這個波浪效應可以再次完成之後。
Thnx提前！

Answer 1

http://jsbin.com/aqorip/3/

您應該添加running變量，而動畫處理，必須是真實的。如果這個變量是真的，我們不會開始新的動畫。動畫的回調將在動畫結束後調用。我們可以檢查它是否是最後一個字母，如果是，則將running設置爲true。

$(function() { 
    $('h1').lettering(); 
    $('h1 span').css('position','relative'); 
    var running = false; 
    $('h1').hover(function(){ 
    if (running) return; 
    running = true; 
    var childs = $(this).children("span"); 
    childs.each(function(i){ 
     $(this).delay(i*50).animate({ top:'-10px' }, 100, function(){ 
     $(this).animate({top: 0}, function() { 
      if ($(this).is(childs.last())) { 
      running = false; 
      } 
     }); 
     }); 
    }); 
    setTimeout(function() { 
     running = false;  
    }, children.count * 150); 
    }, function(){ 
    $(this).children('span').animate({ top: 0 }, 100); 
    }); 
}); 

請注意，您有未使用的變量i。您不應該聲明它，因爲您有i作爲函數的參數。所以你的代碼中的第一個i將被隱藏在參數i的後面。