如何按顺序淡入图像 [英] How to fade-in images in sequence

问题描述

我一直为此苦苦挣扎.一位客户希望横幅广告淡出他的网站顶部(我告诉他，这看起来很la脚).我设法使单个横幅淡入onLoad，这很棒.但是，他希望它可以分阶段加载.

I have been struggling with this for a while. A client wants to have a banner fade in at the top of his site (I told him it would look lame). I have managed to get a single banner to fade in onLoad, which is great. However, he wants it to load in in stages.

例如，假设该站点名为"Apples& Pears".他希望苹果"淡入淡出，然后是&"最后是梨".这实际上可行吗?传统上，我会创建动画gif或在Flash中完成某些操作，但是现在这些都可以了，对吗?

For example, let's say the site is called "Apples & Pears". He wants "Apples" to fade in, followed by "&" and finally "Pears". Is this actually possible? Traditionally I would have created an animated gif or done something in Flash but these are no-nos these days, right?

所以我可以使所有这些图像在onLoad中淡出，但是有没有办法说一旦这幅图像完全淡入后，开始下一个图像"?

So I can get all of these images to fade in onLoad but is there a way of saying "once this one has faded fully in, start the next one"?

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

Sorry if my asking is clunky but I think you will get what I mean!

非常感谢收到任何帮助！

Any help very gratefully received!

推荐答案

jsBin演示

您的HTML:

jsBin demo

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

..其中.each()回调内的i返回每个图像的索引(0, 1, 2)

..where i inside the .each() callback returns each image's index (0, 1, 2)

这篇关于如何按顺序淡入图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！