Question

Possible Duplicate:
jquery add a fade to an .addClass

Here is my jsFiddle example: http://jsfiddle.net/sLzGc/

I am trying to create an effect where it appears options 1 through 3 are being rotated. Every 1.2 seconds the green class is removed from the option that has it and the green class is added to the next option. The idea is that the rotation through the three options happens five times (i<5) before the final function alert('Finished') is executed.

I’m trying to use setTimeout(), but I’m open to using .delay(), another jQuery function, or some other option.

Here is my JavaScript/jQuery:

alert('Start');

sampleFunction();

function sampleFunction() {

for (i=0; i<5; i++) {

  setTimeout(function() {
    $('#option2').addClass('green');
    $('#option1').removeClass('green');
  },1200);

  setTimeout(function() {
    $('#option3').addClass('green');
    $('#option2').removeClass('green');
  },1200);

  setTimeout(function() {
    $('#option1').addClass('green');    
    $('#option2').removeClass('green');
  },1200);

}//end for loop

}

alert('Finished');​

My whole example is on jsFiddle: http://jsfiddle.net/sLzGc/

Thanks for any help or insight you can offer!

Answer 1

Here’s how I would approach the problem:

​(​function() {
    var options = [$("#option1"), $("#option2"), $("#option3")],
        cycles = 5,
        i = 0,
        $last = $(null);

    (function next() { 
        if(i < cycles * options.length) {
            $last.removeClass("green");
            $last = options[i % options.length].addClass("green");
            i++;
            setTimeout(next, 1200);
        } else {
            $last.removeClass("green");
            alert("finished!"); //do any other "we're done" stuff here.
        }
    }());
}());​

It’s pretty straightforward and the cool part is that you can add elements to the list of elements to cycle through pretty easily (just add them to options). You can also set the number of cycles if you want. I didn’t make the class or delay length a variable, but that would be very simple in case you wanted to do that.

You can see a demo here:

http://jsfiddle.net/D7SR8/

You might also consider having a callback function at the end and putting the alert() in there. That would be more reusable.