Question

我有这样的事情：

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

});

理想情况下，一个脚本适用于每个'img'内部div，类'.pictures'有些延迟让我们说比前一个'img'高100ms（例如从600开始）。 fadeIn是常量（500）。我尝试了javascript和'for'功能，但没有设法做到这一点。所以我希望第一个img在600毫秒后fadeIn（500），第二个fadein（500）有700个延迟，下一个800ms延迟等...

我将继续及时添加新图像，但我不想更改脚本，因此需要自动化。谢谢你所有的消遣。

Answer 1

你可以这样做：

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

它的作用是使用类图片延迟div中每个img的fadeIn。

Answer 2

您可以使用每个。

 $('#b1, #b2, #b3, #b4').hide();
 $('#b1, #b2, #b3, #b4').each(function(){
      starter = 400;
      current = $(this);
      setTimeout(function() {
       current.fadeIn(500)
      }, starter = 100);
 });

Answer 3

行。我已经明白了。这将有效：

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

感谢所有建议

在jQuery中对类似元素应用不同的延迟

3 个答案: