jquery - 複数の画像がロードされたら、順番にフェードインします

Answer 1

あなたが持っているものの代わりに、これを行うことができ、マークアップをシンプルに保ちます:

<img class="fade" name="0" src="images/1.jpg" />

次に、CSS で最初は非表示にします。

.fade { display: none; }

次に、ページの読み込み時に、それらを順番に表示するために必要なすべてのスクリプトは次のとおりです。

$(window).load(function() {
  $(".fade").each(function(i) {
    $(this).delay(400*i).fadeIn();
  });
});

window.onloadすべての画像が読み込まれるまで待機するのではなくdocument.ready、そのイベントを.fadeIn()コードに使用してください。アニメーションのデフォルト.each()の継続時間は 400 ミリ秒であり、ループ内iは要素のインデックス (0 ベース) であるため、最初の画像は即座に (すべてが読み込まれると) フェードインし、2 番目の画像は 400 ミリ秒遅延します (経由.delay())。 1 番目が完了するとフェードし、その後 3 番目がフェードします。ゆっくりとフェードしたい場合は、たとえば 1 秒ごとに、次のように両方の関数に渡します。

$(this).delay(1000*i).fadeIn(1000);