Question

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

有人知道jquery，mootools，ajax脚本吗？

谢谢！

Answer 1

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

Answer 2

此脚本将淡出您的页面容器并淡入加载页面（您的启动画面）。加载启动画面后，它会对内容发出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/

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

2 个答案: