0

4 つのボックスがあり、ボックスの順序でコンテンツを順次変更したい -
ボックス 1 にはフルーツとトカゲ
ボックス 2 フルーツとトカゲ
ボックス 3 フルーツとトカゲ
ボックス 4 フルーツとトカゲ

読み込み時には、CSS ですべてのトカゲが非表示になっている果物のみが表示されます
。 Box1: 果物が
1 秒後 に
トカゲに変わります。 Box2: 果物が 1 秒後にトカゲに 変わり ます。で、私はそれをループさせることができないようです:






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>
4

3 に答える 3

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

デモ

于 2012-11-22T05:11:16.993 に答える
0

アニメーションの遅延ではなく、タイムアウト期間を延長するだけです

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);
});
于 2012-11-22T06:07:30.490 に答える
0

表示および非表示にする要素の「インデックス」を作成し、後で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);​
于 2012-11-22T05:31:56.693 に答える