How can I fade in and fade out multiple elements?

Question

I can get it to work with just one, but if I add multiple it fades them in and out at the same time (instead of one after another). Here's what I have tried:

$(document).ready(function(){
setTimeout(function(){
$("#head1").fadeToggle(1000);
}, 1200);
$("#head1").fadeToggle(1000);
setTimeout(function(){
$("#head2").fadeToggle(1000);
}, 1200);
$("#head2").fadeToggle(1000);
});

This fades them in and out at the same time. How can successive fading be achieved using jQuery?

Answer 1

You have to add up to the timeout duration like:

 $(document).ready(function(){
    
        var duration = 1200;
        setTimeout(function(){
        $("#head1").fadeToggle(1000);
        }, duration);
        $("#head1").fadeToggle(1000);//this will execute right away you will need another timeout
        setTimeout(function(){
        $("#head2").fadeToggle(1000);
        }, duration * 2);
        $("#head2").fadeToggle(1000);//this will execute right away you will need another timeout
   });

Answer 2

I ended up coming across jQuery's.delay(). Here's what ended up working best:

$("#head1").delay(1000).fadeIn(1000).delay(500).fadeOut(1000);  
$("#head2").delay(3600).fadeIn(1000).delay(500).fadeOut(1000);
$("#head3").delay(6200).fadeIn(1000);