すべての反復が同時に実行されるのはなぜですか？ここ

Question

は、このコードに関連する私の問題をシミュレートjsfiddleです：

$('#button').click(function(){ 
    var i; 
    for (i = 1; i < 4; ++i) { 
     $('#img' + i).fadeIn("slow").delay(1000); 
     $('#img' + i).fadeOut("slow"); 
    } 
}); 

私がフェードインし、その後の実行のために1秒間停止してからフェードアウトし、その後、#img2ため、最初からやり直す#img1要素を期待していました要素など

Answer 1

アニメーションが同時に実行されるように見える理由は、jQueryのアニメーションがすべて非同期に実行されるためです。だから、あなたのコードがやっていることは基本的にすべてのアニメーションを開始することです、そして、あなたのブラウザは実際のアニメーションをほぼ同時に扱います。

jQueryのアニメーション関数は、アニメーションが終了した後に呼び出されるコールバックの使用をサポートしています。後のアニメーションがこのコールバックで確実に行われるようにすることで、アニメーションを強制的に強制的に実行することができます。私は.fadeOutのコールバックとしてanimate()に別のコールをキューイングしてい

$('#button').click(function(){ 
    var i; 
    var $elems = []; 
    for (i = 1; i < 4; ++i) { 
     $elems.push($('#img' + i)); 
    } 

    var animate = function() { 
     var $elem; 
     if ($elems.length) { 
      $elem = $elems.shift(); 
      $elem.fadeIn("slow").delay(1000).fadeOut("slow", animate); 
     } 
     // if the $elems has been cleared out, we're done and this function won't be requeued 
    }; 

    animate(); 
}); 

注：

は、ここでは、あなたの要件（jsfiddle here）を実装することができます一つの方法です。この関数は再実行されますが、$elems配列の状態は各関数呼び出しで変更されるため、各要素のアニメーションは1回実行されます。配列がクリアされると、関数はもう一度実行され、要素がすべてアニメ化されていることを確認します。その場合は、再度キューに入れずに戻ります。

Answer 2

これを試してください：

我々はできないforループ内フェードイン（）遅延を使用します。

代わりにsetInterval（）を使用できます。

次のコードを試してください。

var i; 
var timeMgt; 

$('#button').click(function(){ 
    i = 1; 
    timeMgt = setInterval(ChangeImage,1000); 
}); 

function ChangeImage() 
{ 
    if(i<4) 
    { 
     $('#img' + i).fadeIn("slow").delay(1000); 
     $('#img' + i).fadeOut("slow"); 
     i++; 
    } 
    else 
    { 
     window.clearInterval(timeMgt); 
     return; 
    } 
} 

Answer 3

fadeIn関数とfadeOut関数でコールバックを利用したいと思うでしょう。例はhttp://jsfiddle.net/JaQmd/5/です。

あなたはそれを期待するのはなぜコードの心臓部は、基本的にはそう

var imageNumber = 0; 

$('#button').click(function doAnimation() { 
++imageNumber; 
if(imageNumber <= 3){ 
    $("#img" + imageNumber).fadeIn('slow').delay(1000); 
    $("#img" + imageNumber).fadeOut('slow', doAnimation); 
    } 
});​