用文字制作“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的后面。