run a gif, then hide preloader

Question

Any help here would be much appreciated.

I am building a portfolio site where I would like to include a short jquery preloader script to display an white overlay screen -- along with a centered .gif animation -- for several seconds before fading out the gif, then the overlay to display the homepage behind it.

The script I am working with currently looks like this:

jQuery(window).load(function() { // makes sure the whole site is loaded
jQuery("#status").fadeOut("slow"); // will first fade out the loading animation
jQuery("#preloader").delay(400).fadeOut("slow"); // will fade out the white DIV that     
covers the website.
})

I am able to add a setTimeout function and delay the preloader fadeout for several seconds, but when I do so the .gif referred to in #status doesn't appear. My question is: how do I string together a setTimeout with these two events so that when the page is ready, the .gif is allowed to run for 3 seconds, then fade out, and finally the preloader fades out.

Hope that makes sense. Let me know if you have any further questions. The site is currently on a local dev server but I can screenshot if necessary.

P

Answer 1

I think something like this is what you're looking for:

http://jsfiddle.net/yG2fH/

$(document).ready(function() {
    setTimeout(function() {
        $('#status').fadeOut('slow', function() {
            $('#preloader').fadeOut('slow');
        });   
    }, 3000);
});

fadeOut has an overload with two parameters: first the duration, then a function to run after the animation is complete.