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

【问题标题】：applying different delay for similar elements in jQuery对 jQuery 中的类似元素应用不同的延迟
【发布时间】：2013-07-11 12:57:20
【问题描述】：

我有这样的事情：

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

});

理想情况下，一个脚本适用于 div 内的每个“img”，类“.pictures”有一些延迟，比如说比前一个“img”高 100 毫秒（例如从 600 开始）。淡入是恒定的 (500)。我尝试了javascript和'for'函数，但没能做到这一点。所以我希望第一个 img 在 600 毫秒后淡入（500），第二个淡入（500）有 700 延迟，下一个 800 毫秒延迟等...

我会继续及时添加新图片，但我不想更改脚本，所以自动化是必要的。谢谢大家的建议。

【问题讨论】：

标签： jquery delay

【解决方案1】：

你可以使用每个。

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

【讨论】：

【解决方案2】：

好的。我已经想通了。这将起作用：

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

感谢所有建议

【讨论】：

我找到了这个并在我在stackoverflow上找到的另一个答案中进行了修改。

【解决方案3】：

你可以这样做：

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

它的作用是延迟 div 内每个 img 的淡入，并带有类图片。

【讨论】：

我真正想做的是一个接一个延迟显示。
对不起我的错误。我已经更新了答案。这是一种很好、干净、简单的方法来做你想做的事。
@PiotrCiszewski 但显然它比您找到的方法 (jsperf.com/fade-images-sequentially-jquery) 慢，所以我想您应该使用现有的，而不是这个。