jquery - 用文字制作“波浪”效果，需要修复bug

Question

这就是我所做的。
如您所见，当您快速将鼠标悬停在文本上时，会出现非常混乱的情况。我希望“波浪”效果不会在第二次立即悬停后搞砸，只有在“波浪”效果可以再次完成之后。
提前谢谢！

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。