页面淡入和淡出过渡

Question

我目前正在尝试创建一个脚本，该脚本可以在单击锚链接时从一个页面到另一个页面进行淡入淡出的过渡。我已经做了脚本，但是好像不行

我的代码如下所示：

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

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

它似乎没有进行淡入和淡出过渡。还是正常的pageload。

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;
});

请记住在函数结束时 return false 否则 link 单击的默认操作，即重定向在与锚关联的任何其他操作之前。

但是，真诚的，这会给你一个从当前页面平滑的淡入淡出效果，但在重定向页面上不是平滑的效果，除非它是由你实现的。

Answer 4

这是四年后的事了，但以防万一有人需要它。我同意 Roko 关于闪烁的看法，所以我最初用 CSS 隐藏了 body 而不是在淡出效果之前放置 .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;
    });
 });

最后，我在一个包含 click-to-scroll 导航的页面上使用它，就像大多数 one-pagers，以及使用 target="_blank" 打开新标签，所以我更改了 $("a") 到 $(".transition-link") 并将 class="transition-link" 添加到我要导航的链接。

页面淡入和淡出过渡

Page FadeIn and FadeOut Transition

javascript

jquery

transition

fade

hyperlink