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

});

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

我会及时添加新的图像，但我不想改变脚本，所以它的自动化是必要的。感谢您的所有建议。

4

3 回答 3

1

你可以这样做：

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

这样做是它延迟了带有类图片的 div 内的每个 img 的淡入淡出。

于 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 回答
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 回答