一个接一个地改变不同跨度的颜色

Question

I have some text and I want it to change color in a manner such that the left alphabet changes color first, then the next one and so on(like a wave). So, I assigned each alphabet a span(with class span0, span1 and so on) and tried changing the color using following code:

    for (var i = 0; i < spans.length; i++) {
       window.setTimeout(function(){
          $(".span"+i).animate({'color':'orange'}, 400);
    }, 300);
};

The code doesn't work. (and I am using the jQuery color plugin) So, how can I achieve the effect?

Answer 1

This is the classic "using a loop variable inside a callback bug" - by the time the callback is invoked the value of i is set to its last known value instead of the value it had at the time the callback was registered.

Try this:

// _returns_ a new function that's bound to the specified selector
function setcolor(sel) {
     return function() {
         $(sel).animate({'color', 'orange'}, 400);
     }
}

// set the callback to the function returned above
for (var i = 0; i < spans.length; ++i) {
  window.setTimeout(setcolor('.spans' + i), 300 + 400 * i);
}

per @cwolves answer - you also need to stagger the timeouts otherwise they'll all fire at once, hence the 300 + 400 * i in the code above.

Answer 2

for( var i = 0; i < spans.length; i++ ){
    $( '.span' + i ).delay( 300 + i*50 ).animate( {'color':'orange'}, 400 );
}

Using jQuery, delay for an increasing amount of time then animate the color switch. You have two issues -- You're firing all the animations at the same time, and as Alnitak points out -- your i variable isn't in the proper scope

And you can also remove the need for .span0 , .span1 , etc by giving them all a span class and changing the selector in the above code to:

var $spans = $( '.span' )
for( ... ){
    $spans.eq( i )...