Question

I have 4 boxes and I want the content to change sequentialy in box order –
Box 1 has fruit and lizard
Box 2 fruit and lizard
Box 3 fruit and lizard
Box 4 fruit and lizard

On load you only see fruits with all lizards hidden with CSS
Box1: fruit changes to lizard
1 secs later
Box2: fruit changes to lizard
1 secs later
Box3: fruit changes to lizard
1 secs later
Box4: fruit changes to lizard

This is where I am at and I cant seem to get it to loop through:

x = 1;      
j = x + 1;

for (var i = 1; i<8; i++) { 
       setInterval(function() {
            $("#imager"+x).delay(1000).fadeOut(300);
            $("#imager"+j).delay(1000).fadeIn(300);
        },1000); 
    };

<div class="holder">                
    <ul>
        <li class="itemer">
            <img src="images/fruit.jpg" alt="fruit" id="imager1" />
        </li>
        <li class="itemer">
            <img src="images/lizard.jpg" alt="lizard" id="imager2" class="hide" />
        </li>
    </ul>
</div>
<div class="holder">                
    <ul>
        <li  class="itemer">
            <img src="images/fruit.jpg" alt="fruit" id="imager3" />
        </li>
        <li class="itemer">
            <img src="images/lizard.jpg" alt="lizard" id="imager4" class="hide" />
        </li>
    </ul>
</div>
<div class="holder">                
    <ul>
        <li class="itemer">
            <img src="images/fruit.jpg" alt="fruit" id="imager5" />
        </li>
        <li class="itemer">
            <img src="images/lizard.jpg" alt="lizard" id="imager6" class="hide" />
        </li>
    </ul>
</div>
<div class="holder">                
    <ul>
        <li class="itemer">
            <img src="images/fruit.jpg" alt="fruit" id="imager7" />
        </li>
        <li class="itemer">
            <img src="images/lizard.jpg" alt="lizard" id="imager8" class="hide" />
        </li>
    </ul>
</div> 

Answer 1

Since the call is asynchronous, you can’t run a traditional for loop. Try using a recursive call, so that the next iteration starts when the current one is finished:

var i = 1;
var nextIteration = function() {
    $("#imager"+i).fadeOut(300, function() {
        i++;
        $("#imager"+i).fadeIn(300);
        i++;
        setTimeout(nextIteration, 1000);
    });
}; 

setTimeout(nextIteration, 4000);​

DEMO