Question

I have an array that contains some elements from my page.

Now I need a function that literates through the array and adds a class bold to each element. The problem is that once the class is added, some time has to pass. Then bold has to be removed and needs to be applied to the next element, resulting in a “wave” motion.

I’ve tried to do it like this:

$.each(tdArr, function(i, v) {
  v.addClass("bold");
  setTimeout(function(){
    v.removeClass("bold");
  }, 900)
})

The problem with that code is that bold is added to all elements at once and gets removed 900 ms later, again from all elements at the same time.

What do I have to do to add a delay between the separate actions?

Answer 1

I think you need to approach this slightly differently, as setTimout returns straight away it wont stop the next element being set as bold.

You could do it with a method like this:

function bold(i){
    if(i>0){
        $tdArr.eq(i-1).removeClass('bold');
    }
    if(i == $tdArr.length){
        return;
    }
    $tdArr.eq(i).addClass('bold')   

    setTimeout(function() { bold(i+1) },900);
}

And then to call it you’d just need to call bold(0):

Live example: http://jsfiddle.net/rJGjZ/