Question

I’ve seen on sites before, when you click a link there is a fade to a loading page/splash page and then the new page fades in. Unfortunately, I can’t remember where I saw this, otherwise I would just disect theirs.

Anyone know of a jquery, mootools, ajax script to do this?

Thanks!

Answer 1

This script will fade out your page container and fade in the loading page(your splash screen). Once the splash screen is loaded it makes an AJAX request for the content. On complete it fades from the splash screen to the new page.

$('#wrapperForThePage').click(function() {
    $('#wrapperForThePage').fadeOut(function() {
        $('#loadingSplash').fadeIn();
        $('#wrapperForThePage').load("yourpage.html", function() {
            $('#loadingSplash').fadeOut(function() {
                $('#wrapperForThePage').fadeIn(); // Called on complete, 404 or success
            });
        });
    });
});​

Fiddle http://jsfiddle.net/4KRpE/