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

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

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

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

1 个答案: