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

我以前在网站上看到过，当你点击一个链接时，会淡入一个加载页面/启动页面，然后新页面淡入。不幸的是，我记不起我在哪里看到的，否则我只会切除他们的

有人知道用jquery、mootools和ajax脚本来实现这一点吗

---

谢谢

此脚本将淡出页面容器并淡入加载页面（启动屏幕）。加载启动屏幕后，它会对内容发出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
            });
        });
    });
});​

---

拨弄

使用MooTools完成更复杂的操作：

var contentEl=$（'content'），
loaderEl=$（'loader'），
肚脐=$$（“#肚脐a”）；
var loadContent=函数（）{
//淡出容器
内容淡出（“淡出”）；
//显示加载程序
loaderEl.set（'opacity'，0.）.fade（'in'）；
//获取新内容
newrequest.HTML({
url:this.get（'href'），
onComplete：函数（响应项）{
//清空以前的内容并注入新内容
contentEl.empty（）.adopt（responseel）；
//显示内容
内容淡入；
//隐藏装载机
loaderEl.淡出（“淡出”）；
}
}).邮政({
html:“”+this.get（'html'）+“”
});
};
肚脐。每个（功能（肚脐）{
导航增音({
点击：功能（e）{
e、 停止（）；
//单击链接时加载新内容
loadContent.bind（this.run（）；
}
});
});​

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