javascript - 使用 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，您将无法检测到窗口卸载并触发它的效果...