想要淡出當前的網頁並淡入下一個？

Question

我想慢慢地淡出當前網頁並淡入在下一頁中，當我點擊任何其他頁面的鏈接時（在我的網站中）。

$(document).ready(function() { 
    $('body').css("display","none"); 
    $('body').fadeIn(2000); 

    $("a:transition").click(function() { 
     event.preventDefault(); 
     linkLocation=this.href(); 
     $('body').fadeOut('slow', 0, redirectPage); 
    }); 

    function redirectPage() { 
     window.location=linkLocation; 
    }; 
    }); 

http://jsfiddle.net/Rohanhola/vmpnc9f0/2/ 

與上面的代碼，我能淡化在接下來的頁面中的內容，本網頁上的淡出似乎並沒有工作！

歡迎光臨！

在此先感謝。

Answer 1

首先，您需要禁用默認鏈接行爲。所以，你的鏈接的錨需要，而不是HREF被設置爲

<a href="javascript:void(0)"></a> 

然後，您可以鏈接目標設置自定義的數據屬性。

<a href="javascript:void(0)" data-target="/setTheLocationYouWant></a> 

最後，你只會修改你的JS。

$("a:transition").click(function() { 
     event.preventDefault(); 
     linkLocation=this.data('target'); //modified bit 
     $('body').fadeOut('slow', 0, redirectPage); 
    }); 

編輯：簡易版（僅JS變化）

$("a:transition").on('click', function(event) { 
    event.preventDefault(); 
    linkLocation=this.href(); 
    $('body').fadeOut('slow', 0, redirectPage); 
}); 

您使用.click()自動調用默認的鏈接行爲。代替它，請使用.on()方法。此外，您忘記將event本身作爲參數。