CODEWITHSUNDEEP
jqueryfade
Andy Ashwin
Andy Ashwin

Reputation: 121

Cannot get my images to fade in right sequence with jquery

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!

Upvotes: 0

Views: 227

Answers (4)

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

Try this Demo

DEMO CODE

This is the simple jQuery for it 

var mySequence=["one","two","three","four","five","six"];
$.each(mySequence,function(i){
  $("." + mySequence[i]).delay(1000*i).fadeTo(1000,1);
});

Upvotes: 0

bhatanant2
bhatanant2

Reputation: 606

I would suggest to trigger the fade in after document load.. Also trigger the next animation after the first one has finished

Example

$(document).ready(function(){
     $('#project_banner').fadeIn('slow', function(){
        //This is called after fade in 
        $('#project_and_banner').fadeIn('slow',function(){
           // And so on
        });   
     });
});

Upvotes: 1

Patriks
Patriks

Reputation: 1012

you can specify callback, this callback function will be called when a function finishes its work

  $('#one').fadeIn('slow', function() {
     $('#two').fadeIn('slow',function(){
             $('#three').fadeIn();
       });
  });

here first it will fadeIn #one, then #two and then #three

Upvotes: 0

Mike
Mike

Reputation: 781

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] )

Upvotes: 1

Related Questions