jquery - jQuery顺序循环

Question

我有 4 个盒子，我希望内容按盒子顺序依次更改 -
盒子 1 有水果和蜥蜴
盒子 2 水果和蜥蜴
盒子 3 水果和蜥蜴
盒子 4 水果和蜥蜴

加载时，您只会看到所有蜥蜴都被 CSS 隐藏的
水果 Box1：水果在
1 秒后变为蜥蜴
Box2：水果在
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);​

演示

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