Question

This is what I did。
正如您所看到的，当您快速将鼠标悬停在文本上时，会出现混乱。我希望这样“挥动”效果不会在第二次移动后悬停，只有在“波浪”效果可以再次完成之后。 Thnx提前！

Answer 1

您应该添加running变量，该变量在处理动画时必须为true。如果此变量为true，我们将不会启动新动画。在动画结束后将调用animate的回调。我们可以检查它是否是最后一个字母，如果是，则将running设置为真。

$(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后面。

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

1 个答案: