jquery - テキストで「波」効果を作成するには、バグを修正する必要があります

Question

これが私がしたことです。
ご覧のとおり、テキストの上にすばやくホバーすると、おかしな混乱が生じます。2番目の即時ホバー後に「波」効果が台無しにならないようにしたいのですが、その「波」効果が再び実行できるようになります。
事前にt​​hnx！

Answer 1

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

runningアニメーションの処理中にtrueでなければならない変数を追加する必要があります。この変数が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。