0

我正在尝试在我的网站（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;
    }
});

4

1 回答 1

1

淡入/淡出身体的另一种解决方案是覆盖白色或黑色div。

CodePen 演示

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

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

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

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

然后翻转 JavaScript 中的fadeInandfadeOut调用。

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

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

于 2013-07-25T23:19:45.700 回答