jQuery的順序循環

Question

我有4個箱子，我想內容在框中爲了sequentialy改變 -
插盒1水果和蜥蜴
箱2個水果和蜥蜴
專欄3水果和蜥蜴
箱4水果蜥蜴

在負載你只看到果實隱藏的CSS
BOX1所有蜥蜴：水果修改蜥蜴
1秒後
BOX2：水果變s到蜥蜴
1秒後
BOX3：水果修改蜥蜴
1秒後
Box4：水果修改蜥蜴

這是我在哪裏，我似乎無法通過得到它的循環：

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

由於該調用是異步的，因此無法運行傳統的for循環。嘗試使用遞歸調用，這樣，噹噹前的完成下一次迭代開始：

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

setTimeout(nextIteration, 4000);​ 

DEMO

Answer 2

，您可根據您要顯示和隱藏，以及後來的元素的「指數」使用jQuery.toggle切換它們可見，稍後您可以使用其回調來調用下一個元素。

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

相反然後動畫延遲，只是延長超時時間

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

- 或 -

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); 
} 

- 或 -

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); 
} 

- - 或 -

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); 

- 或 -

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