Question

我的jQuery代码有问题，每当我过渡到存储库中的另一个html文件时，都会在下一页过渡之前发生这种微妙的闪烁。

代码如下：

$(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 1

要了解此行为，请首先查看$(document).ready在jQuery中的工作方式：

当DOM（文档对象模型）已经建立时，发生ready事件。加载。

$(document).ready内的代码-hide()函数-在页面呈现后立即执行，自然会引起明显的闪烁，然后突然body隐藏然后淡入。

解决此问题的一种方法是添加一些CSS，并从另一个角度解决问题。

首先，您可以添加一个类，例如。 .faded-out到HTML中的body元素。

需要添加以下CSS代码：

body{
    transition: opacity 200ms ease-in-out;
}

.faded-out{
    opacity: 0;
}

（{200ms对应于jQuery中的200； ease-in-out对应于jQuery中的默认动画计时功能，swing）

然后，您可以像这样从.faded-out内部的body中删除$(document).ready类：

$(document).ready(function() {
    $('body').removeClass("faded-out");
    ...your remaining code
    });
 });

在调用$(document).ready之前，身体逐渐淡出，因此感知到的效果应该是相同的，减去闪烁。

jQuery淡入淡出过渡到下一页时会引起怪异的闪烁

1 个答案: