退出/外部链接启动页/页面加载

这个脚本将淡出你的页面容器,淡入加载页面(你的启动屏幕)。启动屏幕加载后,它会对内容发出AJAX请求。完成后,它会从启动屏幕淡入新页面。

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

http://jsfiddle.net/4KRpE/

用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();
        }
    });
});​