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

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

首先，您需要禁用默认链接行为。因此，您的链接的 anchor 需要设置为

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

然后，您可以为链接目标设置自定义数据属性，而不是 href。

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