jquery - 如何按顺序淡入图像

Question

我已经为此苦苦挣扎了一段时间。一位客户希望在他的网站顶部淡入淡出横幅（我告诉他这看起来很蹩脚）。我设法让一个横幅在 onLoad 中淡入淡出，这很棒。但是，他希望它分阶段加载。

例如，假设该站点名为“Apples & Pears”。他希望“Apples”淡入，然后是“&”，最后是“Pears”。这真的可能吗？传统上，我会创建一个动画 gif 或在 Flash 中做一些事情，但现在这些都是不可以的，对吧？

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

对不起，如果我的要求很笨拙，但我想你会明白我的意思！

非常感谢您的任何帮助！

score 2 · Accepted Answer

jsBin 演示

您的 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)

score 0 · Accepted Answer

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