如何按顺序淡入图像

Question

我一直在努力解决这个问题。一个客户希望在他的网站顶部有一个横幅淡入淡出（我告诉他看起来会很蹩脚）。我设法得到一个横幅淡入onLoad，这很棒。但是，他希望它分阶段加载。

例如，假设该网站名为“Apples＆amp; Pears”。他希望“苹果”淡出，然后是“＆amp;”最后是“梨子”。这有可能吗？传统上我会创建一个动画gif或在Flash中做一些事情，但这些日子都是no-nos，对吗？

所以我可以让所有这些图像在onLoad中淡出，但有没有办法说“一旦这个完全褪色，开始下一个”？

很抱歉，如果我的问题很笨拙，但我想你会理解我的意思！

非常感谢任何帮助！

Answer 1

jsBin demo

您的HTML：

  <div class="banner">
    <img src="" alt="Apples" />
    <img src="" alt="and" />
    <img src="" alt="Pears" />
  </div>

CSS：

.banner img{
   display:none;
   position:absolute;
}

jQuery的：

$('.banner img').each(function( i ){
  $(this).delay(1000*i).fadeTo(1000,1);
});

.. i回调中的.each()返回每张图片的索引（0, 1, 2）

Answer 2

延迟是你的朋友： http://api.jquery.com/delay/

Answer 3

您可以将图像堆叠在彼此之上，然后使用顶部图像上的.fadeIn( [duration] [, callback] ) Returns: jQuery功能，并指定一个回调函数，该函数在执行时将淡入第二个图像，依此类推。