jQuery hide and show divs with multiple set delays, code not working

Question

I have some jQuery below which is not quite working correctly. When I click the button I need the following to happen:

• A loading gif is displayed for 5 seconds
• Once this fades out, I need a thank you div to appear for 5 seconds.
• Then once this finishes I then need to hide the current div and then show the first div (page1)

However the loading gif div and the thank you div display at the same time and the hide/show page1 and 2 over rides the above.

Here is my code:

 $('a.myLink').click(function(e){ 
                // show loading gif for 5 seconds then fade out
                $(".myGif").show().delay(5000).fadeOut();

                //once loading gif has finished then show thank you message for 5 seconds then fade out
                $(".thanksAgain").show().delay(5000).fadeOut();

                // once thank you message has finished go back to main screen
                $('.page2').hide();
                $('.page1').show();
            });

How would I do this so it all works in correct sequence?

Answer 1

$('a.myLink').click(function(e){ 
                // show loading gif for 5 seconds then fade out
                $(".myGif").show().delay(5000).fadeOut(400,function(){
                       $(".thanksAgain").show().delay(5000).fadeOut(400,function(){

                                $('.page2').hide();
                                $('.page1').show();
                       });

                });


});