Question

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.

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?

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!

Answer 1

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

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