テキストに「波」効果を付けるには、バグを修正する必要があります

Question

This is what I did
ご覧のとおり、テキストをすばやく表示すると、面倒な混乱が生じます。私は、 "波"エフェクトが2回目のイニシエイトホバーの後に邪魔にならないようにしたい。
Thnxで事前に！

Answer 1

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

アニメーションが処理している間、あなたは真でなければならないrunning変数を追加する必要があります。この変数がtrueの場合、新しいアニメーションが開始されません。アニメーションのコールバックは、エニメーションの終了後に呼び出されます。最後の文字かどうかを確認し、一致する場合は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。