javascript - 画像を1つずつフェードインするにはどうすればよいですか?

Question

これを行うために連鎖 settimeout を使用する例を見てきました。ただし、それは無数の画像では機能しません。複数の画像で呼び出される .each 関数は、それらを同時にフェードインさせます。実行をブロックしているループに使用できる .each のような関数はありますか?

Answer 1

jQuerydelayメソッドを使用できます。

$('img').each(function(i) {
   $(this).delay(i * 400).fadeIn();
});

Answer 2

function fadeInComplete(i,$imgs)
{

  if (i >= $imgs.length) return;
  $imgs[i].fadeIn(400,fadeInComplete.bind(i+1,$imgs);
}

$imgs = $('img');
fadeInComplete(0,$imgs);

Answer 3

JavaScript でブロッキング メソッドを使用する (または考える) べきではありません。メソッドのコールバックを指定できますfadeIn。アニメーションが終了した後に呼び出されます。コールバックで、次の画像のアニメーションを開始できます。