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

Question

我以前在网站上看到过，当你点击一个链接时，加载页面/启动页面出现淡入淡出，然后新页面淡入。不幸的是，我不能请记住我在哪里看到了这个，否则我只会把它们弄糟。

任何人都知道的jQuery，mootools，ajax脚本来做到这一点？

谢谢！

Answer 1

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

Answer 2

更复杂的东西用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(); 
     } 
    }); 
});​