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

Question

I'm trying to add a transition effect to my site with Jquery. Everything was working, but suddenly the site started flickering one time before the fade in effect... I add a display:none and it was solved. But if visitors have JavaScript disabled, they won't be able to view the site. I've already add it as a script but it doesn't work... Any ideas? Here is my fade code:

<!--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

You can perform the fade in transition using CSS only, like so:

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

As for the fade out effect, if the browser will not be running javascript, you will have no means of detecting the window unload and trigger an effect for it...

Answer 2

For javascript disabled : You can add this to your page,so user wont be able to see anything rather than a blank page and a useful message

<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