想要淡出当前的网页并淡入下一个？

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本身作为参数。