Javascript 页面淡入淡出转换

我目前正在尝试创建一个脚本，当单击一个锚点链接时，它可以从一个页面过渡到另一个页面。我已经写了剧本，但似乎不起作用

我的代码如下所示：

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

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

---

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

首先需要隐藏元素，可以使用

.hide（）

或CSS

显示：无

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

最初需要使用
.hide（）
或CSS
display:none隐藏元素

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

首先在页面加载时隐藏页面主体，然后
您需要将重定向行置于
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; 
        });
    });
 });

首先在页面加载时隐藏页面主体，然后
您需要将重定向行置于
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; 
        });
    });
 });

您必须使用
setTimeout
来计时
窗口.location.replace（）
以在当前
正文
褪色后执行，如下所示：

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

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

但是，诚恳地说，这将使您在当前页面上获得平滑的淡入效果，但在重定向页面上不会产生平滑效果，除非由您实现。
您必须使用
setTimeout
来计时
窗口。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=“\u blank”
的新选项卡，因此我将
$（“a”）
更改为
$（“.transition link”）
，并将
class=“transition link”
添加到我想要导航的链接中。
这是四年后的事了，但以防有人需要它。我同意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=“\u blank”
的新选项卡，因此我将
$（“a”）
更改为
$（“.transition link”）
，并添加了
class=“transition link”
到我想要导航的链接。
它没有进行淡入淡出过渡。ajax加载函数需要第一个参数，加载的htmlyou的链接可能会这样做：-
$（“body”）.fadeOut（200）当前页面，-然后
窗口.位置.替换（$link）与一个页面，主体的Css是
显示：无
-最后在新页面加载脚本中，当onload/document.ready
$（“主体”）.fadeIn（200）。。。但老实说，我发现这种方法有点脏。你需要把重定向行放在fadeOutDuplicated问题的完整函数中。请看，它没有进行淡入淡出过渡。ajax加载函数需要第一个参数，加载的htmlyou的链接可能会这样做：-
$（“body”）.fadeOut（200）当前页面，-然后
窗口.位置.替换（$link）与一个页面，主体的Css是
显示：无
-最后在新页面加载脚本中，当onload/document.ready
$（“主体”）.fadeIn（200）。。。但老实说，我发现这种方法有点脏。你需要把重定向行放在fadeOutDuplicated问题的完整函数中。请参阅以防止由于DOM就绪时触发的
hide（）
而导致的初始闪烁CSS
display:none
可能是一个更好的解决方案。要防止由于DOM就绪时触发的
hide（）
而导致的初始闪烁，CSS
display:none
可能是一个更好的解决方案。谢谢。是否有此代码的非Jquery版本，以及在目标页面上有什么等效版本可以淡入？谢谢。是否有此代码的非Jquery版本，以及在目标页面上淡入的等效版本是什么？