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 开始），因此第一个图像会立即淡入（一旦全部加载），第二个图像会延迟 400 毫秒（通过.delay()），所以它当第一个完成时淡出，之后的第三个等等。如果你想变慢一点，比如每个 1 秒，只需将它传递给两个函数，如下所示：

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