页面淡入和淡出过渡

Page FadeIn and FadeOut Transition

本文关键字：淡出 淡入      更新时间：2023-09-26

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

我的代码如下所示：

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

它似乎没有进行淡入和淡出过渡。它仍然是正常的页面加载。

首先在页面加载时隐藏页面正文，然后您需要将重定向行放置在完整的功能中 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; 
        });
    });
 });

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

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

使用 setTimeout 来计时当前body褪色后要执行的window.location.replace()，如下所示：

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

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

但是，真诚地说，这会给你一个平滑的淡入淡出效果，但不会给你一个平滑的效果，除非它是由你实现的。

这是四年后，但以防万一有人需要它。我同意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")更改为$(".transition-link")，并向我想要导航的链接添加了class="transition-link"。

相关文章：