退出/外部鏈接啓動頁面/頁面加載

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