0


I am trying to make waves from letters on hover using jQuery and its plugin called lettering.js, which spans every letter of a element.
This is what I tried to do [http://jsbin.com/ezuze])
I am newb and tried using for loop, but failed :(. Anyone knows how to accomplish this?

Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247
phoxd
  • 1,546
  • 3
  • 12
  • 26
  • 2
    Can you please improve your question? It's not clear what you want to achieve or what results you've had thus far. – Nathan Taylor May 10 '12 at 03:34
  • @NathanTaylor: Click on the link and explain to the OP why his code is broken. It's a fairly common problem. – Blender May 10 '12 at 03:40
  • 2
    @Blender Be my guest. I'm just trying to encourage him to ask better questions. :\ – Nathan Taylor May 10 '12 at 03:43
  • Well, I can see one problem where you use `i*100`. Have a read, its one of the finer details in javascript http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – goat May 10 '12 at 04:02

2 Answers2

2

The animate() function is being used incorrectly (demo)

$(function() {
  $('h1').lettering();
  $('h1 span')
    .css('position','relative')
    .hover(function(){
      $(this).animate({ top:'10px' }, 100);
    }, function(){
      $(this).animate({ top: 0 }, 100);
    });

});

And no loop is required, unless you want to animate ALL of the spans upon initial hover.

Mottie
  • 84,355
  • 30
  • 126
  • 241
0

http://jsbin.com/ezuzep/4/edit

Using the inbuilt .each() function is better for new players, since loops can get quite confusing.

ahren
  • 16,803
  • 5
  • 50
  • 70