使用 jquery 在页面之间淡入淡出

Question

我正在尝试使用 Jquery 向我的网站添加过渡效果。一切正常，但在淡出效果之前，网站突然开始闪烁一次……我添加了一个 display:none，它就解决了。但是，如果访问者禁用了 JavaScript，他们将无法查看该网站。我已经将它添加为脚本，但它不起作用......有什么想法吗？这是我的淡入淡出代码：

<!--transition-->
    <script type="text/javascript">
        $(document).ready(function() {

            $("body").css("display", "none");
            $("img").css("display", "none");

            $("body").fadeIn(2000);
            $("img").fadeIn(2000);

            $("a.link").click(function(event){
            event.preventDefault();
            linkLocation = this.href;
            $("body").fadeOut(1000, redirectPage);
            $("img").fadeOut(1000, redirectPage);   
        });

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

        });
    </script>

Answer 1

您可以仅使用 CSS 执行淡入淡出过渡，如下所示：

body {
    animation: myfadeInAnimation 2s;
}
div {
    width: 300px;
}
@keyframe myfadeInAnimation {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes myfadeInAnimation {
    from {opacity: 0;}
    to {opacity: 1;}
}

Here is the JSFiddle demo

至于淡出效果，如果浏览器不会运行 javascript，你将无法检测window卸载并触发效果。 ..

Answer 2

对于 javascript 已禁用 : 您可以将此添加到您的页面，这样用户将无法看到任何内容，除了空白页面和有用的消息

<noscript>
         Javascript is not enabled on browser and require this to be enabled to function properly.
         Here are the <a href="http://www.enable-javascript.com/" target="_blank">
         instructions how to enable JavaScript in your web browser</a>.
         <!-- <meta http-equiv="refresh" content="0;url=http://www.enable-javascript.com/">-->
          <style type="text/css">
             div.container { display:none;}
          </style>
 </noscript>

assuming every thing is inside your container

使用 jquery 在页面之间淡入淡出

Fade between pages using jquery

javascript

jquery

html

fade