0

私はこのようなものを持っています:

    <div class="pictures">
            <img src="01.jpg" id="b1"/>
            <img src="02.jpg" id="b2" />
            <img src="03.jpg" id="b3" />
            <img src="04.jpg" id="b4" />
    </div>

そして、各画像を少し遅れて次々と表示したい。私はこのコードを書きましたが、回避したい要素ごとに特定の ID を設定する必要があるため、完全な解決策ではありません。スクリプトは次のとおりです。

  $('#b1, #b2, #b3, #b4').hide();

      setTimeout(function() {
       $('#b1').fadeIn(500)
      }, 600);

      setTimeout(function() {
       $('#b2').fadeIn(500)
      }, 700);

      setTimeout(function() {
       $('#b3').fadeIn(500)
      }, 800);

      setTimeout(function() {
       $('#b4').fadeIn(500)
      }, 900);

});

理想的には、クラス「.pictures」を持つdiv内のすべての「img」に適用されるスクリプトです。たとえば、前の「img」よりも100ミリ秒高い遅延があります（たとえば、600から始まります）。フェードインは定数 (500) です。私はjavascriptと関数「for」を試しましたが、うまくいきませんでした。だから私は最初のimgを600ミリ秒後にフェードイン（500）し、2番目は700ミリ秒の遅延でフェードイン（500）し、次のものは800ミリ秒の遅延など...

時間内に新しい画像を追加し続けますが、スクリプトを変更したくないので、スクリプトの自動化が必要です。すべての提案に感謝します。

4

3 に答える 3

1

わかった。私はそれを理解しました。これはうまくいきます：

$('.pictures img').hide().each(function(i){
  (function(e, i){
    setTimeout(function() {
       e.fadeIn(500);
    }, 500+100*i); 
  })($(this), i);
});

すべての提案に感謝します

于 2013-07-11T13:07:48.240 に答える
1

次のようにできます。

delay = 0;
$('.pictures img').each(function () {
    $(this).delay(delay).fadeIn();
    delay += 100;
});

それが何をするかというと、クラスの写真を含む div 内の各 img の fadeIn を遅らせます。

于 2013-07-11T13:00:39.277 に答える
1

それぞれ使えます。

 $('#b1, #b2, #b3, #b4').hide();
 $('#b1, #b2, #b3, #b4').each(function(){
      starter = 400;
      current = $(this);
      setTimeout(function() {
       current.fadeIn(500)
      }, starter = 100);
 });
于 2013-07-11T13:01:13.060 に答える