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，你将无法检测到窗口卸载并触发效果...

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>

假设每件东西都在你的容器里

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

2 个答案: