使用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;}
}

这是JSFiddle演示

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