Question

Not sure if it is possible. The idea is very basic, list of buttons that onload start changing its background with a short interval and then repeat. I have a list of elements like:

<div class="container">    
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
</div>

Next I want to manipulate it one by one, change background and pass to next with short interval. The problem is that it applies changes to all of them at once.

Here is the way I do it:

var element = $('.button');         

element.each(function(){
    var thisObj = $(this);

    setInterval(function(){
        thisObj.css({
            'background':'#000'
        })
    }, 1000)
}); 

And then simply repeat it till the mouseover event is detected.

Could anyone suggest a way to do this? Thank you.

Answer 1

Here is an example: http://jsfiddle.net/maniator/S7C9h/

Some code to go along with it:

var buttons = $('.button'),
    buttons_length = buttons.length;

function sliiide(index, interval){
    var button = buttons.eq(index%buttons_length);
    if(button.css('background-color') == 'rgb(0, 0, 255)'){ //blue
        button.css({
            background: 'white'
        });
    }
    else {
        button.css({
            background: 'blue'
        });
    }

    setTimeout(function(){
        sliiide(++index, interval);
    }, interval)
}


sliiide(0, 500);

This uses setTimeout instead of setInterval to reduce bubbling of the timeout events.

---

Update based on your comments below: http://jsfiddle.net/maniator/gMDEM/4/