Exit / External Link splash page / page load

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 ju开发者_如何学Pythonst disect theirs.

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

Thanks!

Something more complex done with MooTools: http://www.jsfiddle.net/oskar/rDrtP/

var contentEl = $('content'),
    loaderEl = $('loader'),
    navEls = $$('#nav a');

var loadContent = function(){

    // fade out the container
    contentEl.fade('out');

    // show the loader
    loaderEl.set('opacity', 0).fade('in');

    // fetch the new content
    new Request.HTML({
        url: this.get('href'),
        onComplete: function(responseEls){

            // empty the previous content and inject the new one
            contentEl.empty().adopt(responseEls);

            // show the content
            contentEl.fade('in');

            // hide the loader
            loaderEl.fade('out');
        }
    }).post({
        html: '<strong>' + this.get('html') + '</strong>'
    });
};

navEls.each(function(nav){
    nav.addEvents({
        click: function(e){
            e.stop();

            // load new content when clicking the links
            loadContent.bind(this).run();
        }
    });
});​

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/