Question

我正在尝试在我的网站（Rails App）中使用FadeIn和FadeOut效果。但是FadeOut效果似乎存在问题（文本没有像Wix演示网站那样缓慢淡出）。这是使用的脚本!!

<script>
    $(document).ready(function() {
        $("body").css("display", "none");
        $("body").fadeIn(2000);
        $("a.transition").click(function(event){
            event.preventDefault();
            linkLocation = this.href;
            $("body").fadeOut(1000, redirectPage);
        });

    function redirectPage() {
        window.location = linkLocation;
    }
});

Answer 1

将身体褪去/褪色的替代解决方案是覆盖白色或黑色div。

CodePen Demo

在身体元素的顶部放置一个空div。

<div id="overlay"></div>

您可以设置样式，使其占据整个视口。

#overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 314159;
}

然后在JavaScript中翻转fadeIn和fadeOut来电。

$("#overlay").fadeOut(2000);
$("a.transition").click(function(event){
  linkLocation = this.href;
  $("#overlay").fadeIn(1000, redirectPage);
  return false;
});

您应该将此CSS放在页面的<head>部分，以防止页面加载时闪烁。否则，某些浏览器可能会在CSS完成下载之前开始显示内容。

FadeOut效果不起作用

1 个答案:

CodePen Demo