jQuery sequential looping

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

Rather then an animation delay, just extend the Timeout period

var imageIndex = 0;
var imageInterval = setInterval(function(){
                       $("#imager"+(++imageIndex)).fadeOut(300);
                       $("#imager"+(++imageIndex)).fadeOut(300);
                       if (imageIndex == 8) clearInterval(imageInterval);
                    }, 1000);

-- OR --

var imageIndex = 0;
for (var i=0; i < 8; i=i+2) {
     setTimeout(function(){
         $("#imager"+(++imageIndex)).fadeOut(300);
         $("#imager"+(++imageIndex)).fadeOut(300);
     }, (i+1)/2*1000);
}

-- OR --

function toggleImage(x, y, delay){
   setTimeout(function(){
      $("#imager"+x).fadeOut(300);
      $("#imager"+y).fadeOut(300);
   }, delay);
}

for (var i=1; i < 8; i=i+2) {
    toggleImage(i, i+1, (i+1)/2*1000);
}

-- OR --

for (var i=1; i < 8; i=i+2) {
   (function(x, y){
      setTimeout(function(){
         $("#imager"+x).fadeOut(300);
         $("#imager"+y).fadeOut(300);
      }, y/2*1000);
   })(i, i+1);

-- OR --

$([1,3,5,7]).each(function(index, value){
    setTimeout(function(){
        $("#imager"+value).fadeOut(300);
        $("#imager"+value+1).fadeOut(300);
    }, (value+1)/2*1000);
});

Answer 2

You can make an "index" of the elements you want to show and hide, and later toggle them visible using jQuery.toggle, later on you can use its callback to invoke the next element.

var divs = $('.holder');
var div_idx = 0;

function nextDiv()
{
    return divs[div_idx++ % divs.length];
}


var toggleHolder = function(){
    $(nextDiv()).toggle("slow",toggleHolder);
};  
$(nextDiv()).toggle("slow", toggleHolder);​

Answer 3

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