Question

我目前正在尝试创建一个脚本，在单击锚链接时会使页面之间的淡入过渡。我已经制作了剧本，但它似乎没有用。

我的代码如下：

$("body").load(function() {
    $(this).fadeIn(200);
});

$("a").click(function() {
    $link = $(this).attr("href");
    $("body").fadeOut(200);
    window.location.replace($link);
});

它似乎没有进行fadeIn和fadeOut转换。它仍然是正常的页面加载。

Answer 1

您最初需要隐藏元素，使用.hide()或使用CSS display:none;。

$(document).ready(function() {
    $('body').hide().fadeIn(200);
});

Answer 2

首先在页面加载时隐藏页面正文您需要将重定向行放在fadeOut

的完整函数中

试试这段代码：

 $(document).ready(function() {
    $('body').hide().fadeIn(200);
    $("a").click(function(e) {
        e.preventDefault();
        $link = $(this).attr("href");
        $("body").fadeOut(200,function(){
          window.location =  $link; 
        });
    });
 });

Answer 3

您必须使用setTimeout来确定window.location.replace()在当前body已褪色后执行的时间：

$("a").click(function() {
    $link = $(this).attr("href");
    $("body").fadeOut(200);
    setTimeout(function(){
        window.location.replace($link);
    },200);
    return false;
});

请记住在函数的末尾返回false，否则链接的默认操作单击，即重定向先于与锚点关联的任何其他操作。

但是，真诚地，这将使您从当前页面获得平滑的淡化效果，但不会对重定向页面产生平滑效果，除非您实施。

Answer 4

这是四年后，但以防万一有人需要它。我同意Roko关于闪烁的观点，因此我最初使用CSS隐藏了主体，而不是在淡入效果前放置.hide()：

body {
    display: none;
}

也有人提到使用.fadeOut()，但在Chrome上不起作用。我切换到.show()和.hide()似乎效果很好。它还在消失时为所有元素设置动画，无需大量jQuery插件即可进行需求转换。

$(document).ready(function() {
    $('body').show(500);
    $("a").click(function() {
        $link = $(this).attr("href");
        setTimeout(function(){
            window.location.replace($link);
        },1000);
        $("body").hide(500);
        return false;
    });
 });

最后，我在包含点击滚动导航的页面上使用了此页面，就像大多数单页页面一样，并使用target="_blank"打开新标签页，因此我将$("a")更改为{ {1}}并将$(".transition-link")添加到我要从中导航的链接。

Page FadeIn和FadeOut Transition

4 个答案: