Question

Please take a look at what I have done so far (with a little help from the good folk here!)

http://www.justthisdesign.co.uk/

I have the three banner images fading in, followed by the two in the left column, and finally the one in the right column.

However, the client wants the word “Projects” to fade in first, followed by each of the images in the left column, then “and”, then “Properties”, followed by the image in the right column.

I can get the sequence right, just about, by changing the .delay() value in each of the three divs but the pacing is impossible to get right.

Should I be using a different technique entirely in order to have more control? Obviously the client has no idea how much work this “simple request” involves!

Answer 1

give each element an id, including the tags that hold the banner, then use the callback function for fadeTo to call each element once at a time, after the previous has finished, something like

$('#banner1').fadeTo(1000,1,function(){
  $('#banner2').fadeTo(1000,1,function(){
    $('#banner3').fadeTo(1000,1,function(){
    });
  });
});

The syntax, according to http://api.jquery.com/fadeTo/ is

.fadeTo( duration, opacity [, callback] )