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 朕會功夫
  • 88,688
  • 41
  • 174
  • 241
phoxd
  • 1,392
  • 3
  • 11
  • 25
  • 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
  • 79,894
  • 29
  • 121
  • 237
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,443
  • 5
  • 49
  • 70