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>

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>

• javascript
• jquery
• html
• fade

Share Improve this question Follow asked Aug 21, 2015 at 10:37 André MataAndré Mata 38311 gold badge55 silver badges1616 bronze badges 5

• 1 You should give the display:none to the elements in the stylesheet. As you have it now, the elements will be visible, then will hide only when the jquery starts loading – Cláudio Barreira Commented Aug 21, 2015 at 10:39
• 1 @Cláudio Barreira adding the display:none to the stylesheet will however prevent a graceful fallback for people with Javascript disabled as far as I understood the Question. – user3154108 Commented Aug 21, 2015 at 10:43
• 1 How about doing the fade in with CSS3 (which will fix your problem with JS disabled) and then doing the fadeout with the jQuery. – Edd Aslin Commented Aug 21, 2015 at 10:45
• @CláudioBarreira The only problem is if visitors have JavaScript disabled, they won’t be able to view the site. – André Mata Commented Aug 21, 2015 at 11:07
• @EddSmith I did that whit the code from Ahs N answer and it works perfectly! Thank you all for your help. – André Mata Commented Aug 21, 2015 at 11:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

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./" target="_blank">
         instructions how to enable JavaScript in your web browser</a>.
         <!-- <meta http-equiv="refresh" content="0;url=http://www.enable-javascript./">-->
          <style type="text/css">
             div.container { display:none;}
          </style>
 </noscript>

assuming every thing is inside your container