Making "wave" effect with text, need to fix bug

Question

This is what I did.
As you can see, there is freaking mess when you hover over text fast. I want so that "wave" effect would not mess up after second immidiate hover and only after that "wave" effect can be done again.
Thnx in advance!

Answer 1

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

You should add running variable which must be true while animation is processing. if this variable is true, we will not start new animation. Callback of animate will be called after the end of enimation. We can check if it is last letter or not and set running to true if it is.

$(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);
  });
});

Notice that you had unused variable i. You shouldn't declare it because you have i as an argument of a function. So first i in your code will be hidden behind the argument i.