How to Use jQuery to Make Slick Page Transitions

How to Use jQuery to Make Slick Page Transitions

Adding the final touches to a site can be the difference between a polished and beautiful site that looks “refined,” and a mediocre site that leaves no impression on visitors. jQuery, the versatile JavaScript library, can be leveraged to create all these fine tuned elements. Today we’re going to look at how to use it to create elegant page transitions. Let’s get to it!

If you would like to quickly take a peek at a very simple implementation of this technique, below is the demo for viewing and download.

jQuery Transitions

[tut demo=”http://www.onextrapixel.com/examples/jquery-page-transitions/” download=”http://www.onextrapixel.com/examples/jquery-page-transitions/jquery-page-transitions.zip”]

Getting Started With HTML/CSS

To begin, let’s dive straight into the CSS. We’ll need to change the CSS for the and set it to display: none.

body { display: none; }

This will stop all of the visual elements in the body from loading, initially “hiding” everything. Immediately, astute readers will realize that changing the body’s display tag to none is risky. If visitors have JavaScript disabled, they won’t be able to view the site.

Therefore, a better solution will be adding the display:none CSS property using jQuery. If visitors have JavaScript disabled, they will still be able to see the body content.

<script type="text/javascript">
    $(document).ready(function() {
      	$("body").css("display", "none");
    });
</script>

Your HTML doesn’t have to change much to get these transitions working, but before we get started on that, let’s download and attach jQuery to our page. Visit jQuery and download the latest version of jQuery – it’s easiest to just right-click the link and select “Save Linked File As”. I would suggest downloading the minified version since we’re not going to be changing the source code, but just building on the library.

After downloading jQuery , move the file to a favourable location of your choice in your site directory. Now let’s see the HTML needed to attach jQuery to our site.

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

I suggest appending this in the head section of your document. It is advisable to attach all of your JavaScript at the end of your document to ensure a speedy loading time. However, we need this when the page loads and minified jQuery only comes in at a measly 74kb.

Coding Page jQuery Transitions

Once that’s complete, we need to write the jQuery code that creates the fade transition. First, let’s deal with page fade-ins. In the head section, code up the following:

<script type="text/javascript">
    $(document).ready(function() {
            $("body").css("display", "none");
      	    $("body").fadeIn(2000);
    });
</script>

The first line of the jQuery script assures that the document is ready before it applies the CSS and fades in. The second line applies the CSS style to hide the body so we can use jQuery to fade the page in. The third line calls the jQuery method to fadeIn the body over 2 seconds (feel free to play with the timings and see what you like).

Now, if we fire up our browser we can see the new transition in action! But if we click on any of the links, our site disappears like normal. Wouldn’t it be nice to have a subtle fade effect when visitors leave one page to go to another? Let’s hook that function up.

First, let’s apply a special class on the links we wish to create a fade out effect.

<a href="otherPage.html" class="transition">LINK</a>

Now, if we go back to our HTML, we can modify our script to get some great looking jQuery fades.

<script type="text/javascript">
$(document).ready(function() {
    $("body").css("display", "none");

    $("body").fadeIn(2000);

	$("a.transition").click(function(event){
		event.preventDefault();
		linkLocation = this.href;
		$("body").fadeOut(1000, redirectPage);		
	});
		
	function redirectPage() {
		window.location = linkLocation;
	}
});
</script>

Now, we’ve asked our jQuery script to listen for visitors that click on anchors with a class of transition. If a visitor does click on it, the script immediately cancels the browser redirect, then saves the destination URL in a variable called linkLocation. We then fade out the body of the page over a second, but also pass a second argument that requires the redirectPage function to be called when the animation is completed. The redirectPage function just serves to redirect the browser after the content of your page fully fades out.

Fine Tuning

That’s it! You have everything all set up and you’re ready to rock and roll! But there are a couple of things to mention. These page fades will look much better if you set a specified background color for the html tag similar to the color of your site’s background color in your CSS. This means when the body fades in and out, there is still a color similar to the existing background you have.

html {
	/*If you had a black or close to black background*/
	background-color: #000000;
}

Also, it’s not a bad idea to externalize this script. Remove the script from your HTML and put it in its own .js file and then attach it the same way you did for the jQuery file (but it must be attached after). It’s always a good practice to keep content, presentation and interaction separate.

Here’s a quick look of how my files are organized.

File System

Also, if you want to have all links from your page fade-out, you don’t need to specify which ones to have the transition class; we can just make all your links create the fade. To do this, just replace the third line of the script, changing the jQuery selector from $("a.transition") to just $("a") and remove all the “transition” classes from your anchors.

[tut demo=”http://www.onextrapixel.com/examples/jquery-page-transitions/” download=”http://www.onextrapixel.com/examples/jquery-page-transitions/jquery-page-transitions.zip”]

Conclusion

Using this page fade can make your site stand out as very few sites use this technique. However, be careful to keep the transitions subtle. Used correctly, this jQuery gem will polish and make your site stand out.

Dave is currently nestled in a cozy apartment in San Francisco Bay Area plugging away at design work and enjoying my last year of college. He is a professional designer and developer in love with clean and beautiful design. He is also passionate about life, music, art, design, adventures and fun.

Comments

    • Marco,
    • February 23, 2010
    / Reply

    Although it might look pretty good to see, I personally don’t really like it. It delays the speed users navigate through the website. Maybe you can preload the next page during the animation, so only the loading time will be reduced?

    Otherwise, a good example!

    1. / Reply

      I agree with you macro delays the speed could be mean losing some visitor

  1. / Reply

    Nice technique.

    In firefox though if you click on the back button the previous page doesn’t load.

    It’s a nice idea but I agree with Marco, i don’t think it’s great for the users flow.

  2. / Reply

    Your images don’t exist at the URL you gave them:
    http://net.onextrapixel.com/wp-content/uploads/2010/02/jquery-transitions.jpg

    The ‘net’ in this case should be replaced with ‘www’.

    1. / Reply

      Hi Jaryl,

      http://net.onextrapixel.com is correct. It is our CDN. If you are not viewing the images, you might want to try clearing your cache. ;)

  3. / Reply

    Not just in Firefox, in Chrome and Safari if you click on the back button the previous page doesn’t load. I’ve tried to make it works even we click on the back button by adding display:none property on the body :

    body {
    font-size: 62.5%;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    background: #333;
    color: #fff;
    display: none;
    }

    And put the fadeIn function in the displayPage function to put on the addEventListener function :

    function displayPage() {
    $(“body”).fadeIn(2000);
    }

    window.addEventListener(“load”, displayPage, false);
    window.addEventListener(“unload”, displayPage, false);

    1. / Reply

      Thanks for the solution. It works!

      1 additional point will be adding

      $(“body”).css(“display”, “none”); into the displayPage() function.

      function displayPage() {
      $(“body”).css(“display”, “none”);
      $(“body”).fadeIn(2000);
      }

      So that even if visitors have their JavaScript disabled, they will still be able to see the body content.

        • nae,
        • April 9, 2010
        / Reply

        OK, great!

        nb: for this to work, don’t add “display: none;” in the css page for the body{}

    • Ivor,
    • February 23, 2010
    / Reply

    It looks weird in Chrome.

  4. / Reply

    Right now, the content flashes for a second, then after the JavaScript is loaded it gets hidden only to fade in again. Not really ‘slick’ if you ask me :p Why not use an anti-FOUC measure?

  5. / Reply

    Awesome share.. very nice effect.

      • Really,
      • February 24, 2010
      / Reply

      Really? You’re just replying with a link to your low-cost site. Petty.

    • Justin,
    • February 24, 2010
    / Reply

    How would you go about using this instead of a smooth scroll… I have about a dozen divs within a page that are hidden, I’d like to use this effect just for those links…

    1. / Reply

      Just replace body with the div id and ad a link with a click function:
      $(document).ready(function() {
      $("#id-of-hidden-div").css("display", "none");
      $("#id-of-link-to-div").click(function() {
      $("#id-of-hidden-div").fadeIn(2000);
      });
      });

    • Gabriel,
    • February 24, 2010
    / Reply

    Nice, but if the client have disable js, the body is empty :S:S:S

    1. / Reply

      Just think for one second… disabling javascript is almost as useful as disabling images.

      Why disable images? Really load time these days is not an issue.

      Why disable javascript? The only time I ever do this is if I find a site that refuses to reveal it’s sources. Other then that?

      So: “client have disable js?” not likely, but if so do you really care to cattier to these clients with such poor web standards. Or maybe we are all better off without.

      • It's 2010,
      • August 8, 2010
      / Reply

      Virtually nobody disables javascript anymore. The average user doesn’t even know how to do it and if a person does have javascript disabled, they’re navigating with a very particular purpose that requires it. Anyone who disables their javascript is smart enough to know (or by now has realized) that they are not going to have a full web experience. We really can’t worry about that stuff anymore.

    • Robert Rowe,
    • February 24, 2010
    / Reply

    …like it!

  6. / Reply

    Not bad, but it could be easily improved by assigning $(‘body’) to a variable and referencing the variable on subsequent instances. That will cache the result of the selector, meaning that you’d only be looking up the value one time instead of three like you are doing in this script.

    • DRoss,
    • February 25, 2010
    / Reply

    Tried it out – but with the flickering and back button breaking I can’t use it. I saw it on another site a few weeks ago but couldn’t remember where.

    So nice job but needs more fine tuning.

  7. / Reply

    At http://www.shaynekelly.com I did something similar, and added a unonload hook to deal with the back button. Not perfect either.

    Stephan

    • Rudi,
    • February 25, 2010
    / Reply

    I think we can use this effect as an alternative for page loader effect,

    maybe you can add more effect to this ( not just fade in / out ), it will be more interesting

    cheers

    • SM,
    • February 26, 2010
    / Reply

    Great plugin. Uniquely to favorites! Thanks

    • mark,
    • March 4, 2010
    / Reply

    Works great, ive been looking everywhere on how to do this.. Is there anyway to stop the white flash between page changes?

    thanks alot
    mark

  8. / Reply

    Great Job…
    Thanks

    • Daniel Schwarz,
    • March 16, 2010
    / Reply

    Hi Dave,
    how is it possible that the page transition on your own website:
    http://www.onetwentyseven.com/
    works like a charm?

    I tried to find out how you managed not to fire the fadeIn-transaition unless the whole content is loaded, but failed. I think this is needed to prevent the short flash displaying the sites content before fading in.

    Beyond that you managed the issue with the back button.

    Could you please give me/us a short advise?
    Thanks a lot.

    • Chris,
    • March 19, 2010
    / Reply

    Haha I remember in 1999 / 2000 This was pretty popular.. they even had some extension for dreamweaver just for this ^^

    • Jan,
    • April 3, 2010
    / Reply

    hello,
    giving a css display:none value you risk to be detected by google as hiding content. So from the SEO point of view it can be harmful.
    I don’t know if actually googlebot reads inside javascript code, but if not, it will do it soon.
    You should use a more solid alternative, for example the JQuery animate function with parameters : opacity 0 and animation length 0 milliseconds.

    1. / Reply

      LOMAO! That’s funny. 1st Google uses this same technique on their own site, so they’re not going to kick you for having a display:none.

      In fact Google bots will not flag you for this unless the content within the div is suspicious (keyword stuffing). The only way you get banned for hiding content in most cases is if a live Google moderator happens upon your link and sees you are abusing this method. Google posted something about this a few years ago.

      1. / Reply

        Google don’t need to optimise their site for Google.

    • Tim,
    • May 8, 2010
    / Reply

    How do you make the BG fade in, as well???

    Thanks ladies and gents…

  9. / Reply

    Hey everyone!
    This code works great in google chrome, but in safari and firefox is you navigate away from the page and hit the browsers back button, you get presented with a white page.
    So i used .bind unload like this:
    $(document).ready(function() {

    $(window).bind(“unload”, function() {
    });

    $(“body”).css(“display”, “none”);

    $(“body”).fadeIn(1000);

    — rest of the code —
    });

    Works like a charm in both firefox and safari…..or at least for me.

    hope this helps someone.
    Cheers!

    1. / Reply

      Revision:
      Works an looks good in safari and firefox, but flickers like crazy in chrome.
      To solve the flickering i changed my code like this:

      $(document).ready(function() {

      $(window).bind(“unload”, function() {
      });

      $(“body”).css(“overflow”, “hidden”)

      $(“body”).hide();

      $(“body”).fadeIn(1000);

      — rest of the code —

      });

    • Tim,
    • May 10, 2010
    / Reply

    Thanks Marius!

    I have the whole site loading with the fade effect now. And it’s sweet!!!

    However, I’m having a little trouble when the initial (home) page loads. When it loads, the actual page will flicker, disappear, then fade in…

    My code for the script (linked externally) is as follows:

    ________________________________________________
    $(document).ready(function() {

    $(window).bind(“unload”, function() {
    });
    $(“body”).css(“display”, “none”);

    $(“body”).hide();

    $(“body”).fadeIn(700);

    $(“a.transition”).click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $(“body”).fadeOut(700, redirectPage);
    });

    function redirectPage() {
    window.location = linkLocation;
    }

    });

    ______________________________
    What does anyone recommend for this problem or are we going to have to live with it? It only does it sometimes, not always…

    1. / Reply

      Hey Tim!
      Glad i could help.
      I had a little test page where i played with the effect. Later, after i posted the code above, i saw that if you have a bigger page that doesn’t fit your display, the $(“body”).css(“overflow”, “hidden”) is going to cut the page to fit your display and disable the browsers scroll.

      So, try replacing $(“body”).css(“display”, “none”); in your code
      with
      $(“body”).css(“overflow”, “scroll”)

      That worked for me, the hole page is shown and no white flickering, hope it works for you as well.
      Cheers!

        • Fatherunit,
        • April 20, 2012
        / Reply

        Thanks Marius, Nice attention to detail – helped me eliminate the flicker / white-flash on a page loading into iOS phone / ipod. I appreciate you taking the time to document this.

    • Tim,
    • May 10, 2010
    / Reply

    Cool! I actually want the scrollbar on there at all times so there is no page shifts when going to another page.

    This effect doesn’t seem to be working with spry tooltips either. Don’t know why. Can you possibly help me with that?

    You guys are so helpful thanks a bunch…

    Tim

    1. / Reply

      Hey Tim,

      Sorry, can’t help you with spry, but you could try one of the numerous jquery tooltip plugins.
      Ex:
      http://flowplayer.org/tools/tooltip/index.html
      or
      http://craigsworks.com/projects/qtip/

      Cheers!

    • kelly,
    • May 13, 2010
    / Reply

    Hey, this works great except for the flicker!

    Am I missing something in my code?

    jQuery(window).bind(“unload”, function() {});
    jQuery(“body”).css(“overflow”, “hidden”)
    jQuery(“body”).hide();
    jQuery(“body”).fadeIn(2000);

    jQuery(“a”).click(
    function(event){
    event.preventDefault();
    linkLocation = this.href;
    jQuery(“body”).fadeOut(1000, redirectPage);
    }
    );

    function redirectPage() {
    window.location = linkLocation;
    }

    • kelly,
    • May 13, 2010
    / Reply

    Also has anyone been able to make this work on IE8?

  10. / Reply

    Working fine. really nice for my application, thanks

    • Greg,
    • July 6, 2010
    / Reply

    Hello and thanks for the script… works great without mootools. I am not a js expert but, can you help me to stop de conflict with mootools ?
    regards

    1. / Reply

      @Greg
      Just call jQuery.noConflict(); after all the libraries are loaded.
      Ex:

      jQuery.noConflict();

      jQuery(document).ready(function(){
      jQuery.(“body”).hide();
      …….rest of the code……
      });

      or you can do something like this:

      var $J = jQuery.noConflict();

      $J(document).ready(function(){
      $J.(“body”).hide();
      …….rest of the code……
      });

    • Steve,
    • July 9, 2010
    / Reply

    This doesn’t work in IE 7 or 8. Ideas?

    • Amri,
    • July 10, 2010
    / Reply

    True that this script won’t work with IE.

    Also, somehow, and I’ve tested alot of different things with the html- and body tag, the backgrond image won’t fade. On the 127site the background image does fade.

    And, the flicker is still there. Any suggestions, anyone?

  11. / Reply

    Since Amri asked, “Any suggestions, anyone?” … here’s an idea that occurred to me. Probably a bit of an effort to implement.

    Link clicks are not changed. But the HTML returned to the browser depends on the referrer field in the HTTP header. This field tells you which page the visitor is currently viewing.

    The server sends back the HTML belonging to the currently viewed page (even for the new page!) and also HTML for the new page. Also added is javascript to switch/fade from the old page to the new page.

    So:

    * User visits some page on the site: no special action.
    * User clicks on link on the site that goes to a page within the site: Server responds with HTML that contains both HTML for the previously viewed page and HTML for the new page. Javascript switches/fades from old to new HTML.

    I think this could be very robust for all browsers.

    Hope this is understandable, if not, I’ll try to explain a bit more.

    Stephan

    • Amri,
    • July 10, 2010
    / Reply

    Nice suggestion Stephan.
    Sounds like a sound and solid idea.

    Any code to try what you are suggesting?

    I’m not a coder…

    Amri

  12. / Reply

    Amri, demo might take me a month or two; kind of busy with other stuff. — Stephan

    • Amri,
    • July 10, 2010
    / Reply

    Ok Stephan. I know what you mean. It’s three am saturday morning and I’m still working… ;)

    Though, if your programming skills can be hirable I am open to suggestions. Though I am not in a hurry. Would be a neat thing to see it in action. :-)

    Cheers
    Amri
    (It’s actually Amrit, but my t was missing in my first post)

    • Jose Miguel,
    • July 18, 2010
    / Reply

    Dave, you’ve made me the happiest man in southern Spain this afternoon. I was desperate searching in google how to implement a fadeout effect on a web I’m buliding… and suddenly I found your article.

    THANK YOU!!!

    • Jeff,
    • August 12, 2010
    / Reply

    I love this idea, but i dont know how to apply it to frames. For example, i have a navigation bar and when i click on a link, I want the other frame (content frame) to fade out, how would I accomplish this? I tried a few things, but it made the navigation frame fade out, and then when the transition was done, i got the content to load in the right frame, but it deleted the navigation frame.

  13. / Reply

    Just realized after using this gem, that I need the effect on all links, except for external ones, eg. all with target=”_blank”, or using another jQuery call to open the external links in a new window.

    Is there any way I can add this script to all links like this:

    $(document).ready(function() {

    $(window).bind(“unload”, function() {
    });
    $(“body”).css(“display”, “none”);

    $(“body”).hide();

    $(“body”).fadeIn(700);

    $(“a”).click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $(“body”).fadeOut(700, redirectPage);
    });

    function redirectPage() {
    window.location = linkLocation;
    }

    });

    And then somehow exclude the links with a class of external, or a target set to _blank?

    • Jason,
    • September 11, 2010
    / Reply

    Demo down?

    • redneckliberal,
    • September 16, 2010
    / Reply

    Thanks for this. Works great except I could not kill the white flicker without building a separate jquery animation js to handle fade-ins and used yours only for the fade outs. Not sure why, but IE is (as always) the one that makes you work hard!

  14. / Reply

    I’ve got a perhaps better method of fading in a page.

    Load the page with a width&height 100% black square + the site under it. Then you can use PHP to check if the user has js enabled.

    Check if the user has javascript on, if so, fade the box out and display:none it when finished fading.

    If js is disabled, then… you might be able to use PHP to remove the box.

    Haven’t tested this. But, I would think that fading a box out, rather than fading the body tag would be more efficient, less cpu intensive.

  15. / Reply

    Whit this script works a little better with that IE blsht

    $(document).ready(function() {

    $(“body”).css(“display”, “none”);
    $(“img”).css(“display”, “none”);

    $(“body”).fadeIn(1000);
    $(“img”).fadeIn(1000);

    $(“a.transition”).click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $(“body”).fadeOut(1000, redirectPage);
    $(“img”).fadeOut(1000, redirectPage);
    });

    function redirectPage() {
    window.location = linkLocation;
    }

    });

      • Web Hazard,
      • September 27, 2014
      / Reply

      Definetely a better solution. With the script from the article I ran into problems with a contactform pop-up that didn’t work anymore. With your’s it works again + the browser back-button also works! So many thanks to you!!!

  16. / Reply

    Thank you so much for this!

    Grinning ear to ear : )

    • ved,
    • November 9, 2010
    / Reply

    Any one managed to fix the flickering, it would makes this perfect

  17. / Reply

    Useful jquery transitions.Thanks

  18. / Reply

    For Fast Loding Your Pages Use Hidden Div And Ur Pages As Inline frame in hidden div
    Its Works For Me No Extra Time Need For Loading Every Pages…

    Sorry For My English

    Winline India

    • fozlu,
    • December 5, 2010
    / Reply

    my problem is exactly same as jeff’s. how to apply it to frames. For example, i have a navigation bar and when i click on a link, I want the other frame (content frame) to fade out, how would I accomplish this? I tried a few things, but it made the navigation frame fade out, and then when the transition was done, i got the content to load in the same navigation frame,and it deleted the navigation frame.

    • Thijs,
    • December 13, 2010
    / Reply

    Hi, Thanks!

    What fixed the flicker for me is having a container div fade instead of body, while body still has the background.

    $(window).bind(“unload”, function() {
    });
    $(“#page”).css(“display”, “none”);

    $(“#page”).hide();

    $(“#page”).fadeIn(700);

    $(“a”).click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $(“#page”).fadeOut(700, redirectPage);
    });

    function redirectPage() {
    window.location = linkLocation;
    }

    • Nik,
    • February 7, 2011
    / Reply

    Like this effect but had major problems with original code.

    Then read posts from Marius and got things working a lot better using this code:

    $(document).ready(function() {
    $(window).bind(“unload”, function() {
    });

    $(“body”).hide();
    $(“body”).fadeIn(700);

    $(“a.fade”).click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $(“body”).fadeOut(700, redirectPage);
    });

    function redirectPage() {
    window.location = linkLocation;
    }
    });

    Website I am currently testing on has background styled in html tag so did not have same problems with white flashes.

    Marius’ suggestion of adding “jQuery(“body”).css(“overflow”, “hidden”)” did cause problems with adding scroll bars where not needed. Also had problems with lightbox script problems that the noConflict command did not solve.

    Finally arrived at the solution by changing to “a.fade” and adding “fade” class to all links except slideshow and a popup link.

    Now getting good results in all browsers (except IE). Will Try Daniel Medi idea next.

    I suspect best fix will be suggestion to wrap everything in a div tag. However, I have just finished rewriting site to HTML5 and am overjoyed to have pages without one single div!

      • Jason,
      • December 10, 2011
      / Reply

      I have tried this it fixed my lightbox issues but the page won’t fade out only in. Any idea how to fix this?

    • Owain,
    • February 10, 2011
    / Reply

    I was worried that for random periods of long loading (large mysql query or high server load etc.) user might be wondering what was going on with plain white screen.

    Instead of fading out the body, fade out the div wrapper and insert an absolutely positioned loading GIF above it in the code – which will display behind it on the page. This means that on fade out the loading GIF fades in and fades back out on the next page loading in:

    Yes the CSS is mixed in blah, blah – it’s just for ease of reading:

    You can position it how you like, I just happened to have a fixed layout and used left/top positioning.

    Z-index’s ensure that the gif is underneath. Z-indexes require a positional style to be declared. Also make sure your #wrapper has a background set so the loading.gif doesn’t just show through it.

    This is my two penneth – there are obviously plenty of cleaner ways etc. – this was just to show the general idea of having a loading GIF behind the faded out div.

    Hope it helps someone

  19. / Reply

    am looking for something like this, but instead of fade in, can i get slide in option (i know there is a jquery for slide in page effect, but it need single page) anyway to get slide in style in multiple page website ?

    • BL,
    • February 27, 2011
    / Reply

    it’s great but if i create a DIV with a position absolute, doesn’t work in Internet Explorer ! I didn’t know why !
    Someone have a solution?

    Thx!

    Yoan.

    ps: sorry for my english…

      • luke,
      • June 16, 2011
      / Reply

      I have the same problem !
      I don’t know why .. just another confirm of how IE sucks.

    • Deli,
    • March 2, 2011
    / Reply

    Thank you really great!

    But the links with an anchor from one page to another page does not work …

    Any idea? Solution?

    Thank you in advance

    Ps: machine translation … I’m french …

  20. / Reply

    Can you set up a transition to show a page for a few seconds then transition to the next page, kind of like Apple does on their website now?

    • Anders Hansen,
    • March 17, 2011
    / Reply

    Hi.

    Anyone who figured out a good way to do this for only parts of the website? (I dont want the header to fade)

    • Anonymous,
    • March 28, 2011
    / Reply

    Awesome tutorial. Simple solution that adds a great spice

  21. / Reply

    Hi,

    I solved the IE flickering by putting a {style=”display:none”} on the div I was trying to use the fade in/fade out. It worked perfectly. Not sure if it will work if you are trying to use it for the body though. Maybe you can try it.

    • Jonas,
    • April 9, 2011
    / Reply

    Neither the original FadeIn code nor the myriad variations presented here in the comments work in IE9.

    I’ve been scouring the web all day and can’t find any way to get a page to fade in on IE9. Even the old IE-only page transition filters and DXImageTransform meta tags that used to work in IE5.5 – IE8 are no longer supported in IE9.

    Your page transition FadeIn code works great in FF, Safari and Chrome. I would really appreciate a solution for IE9 though, since I’m sure most of my users will be on IE9 soon.

  22. / Reply

    Hi

    Like the effect,
    Want to use it to sway out DIVs

    I don’t know what I am doing….. bit of an issue….

    Has anyone doene this and could post their html and js please?

    Rodney

    • Dave,
    • April 19, 2011
    / Reply

    Does this work in a frame?

  23. / Reply

    Ok, so first, I’m glad I stumbled upon this site!

    But I put the code in a site I’m developing and it’s working, but the background image isn’t fading. Is there a way to make it fade in and out as well?

    Thanks,
    Jim

    • John,
    • June 3, 2011
    / Reply

    How would one insert a loading gif image in between the transitions?

  24. / Reply

    This is genius.

  25. / Reply

    This was truly a fantastic tutorial. Just wanted to express some thanks!

  26. / Reply

    Thanks for your tutorial..! Greetings from holland

    • Sam,
    • August 2, 2011
    / Reply

    I think this is a rather clunky way to do it, although I see no other way.

    If the page is served slowly, you’re going to see the site load, and as soon as the javascript kicks in, it hides the page, and fades in. That’s confusing to say the least.

    Using a page transition in conjunction with ajax page loading is more suitable, as seen on http://dna.co.nz/.

  27. / Reply

    Really useful, just what I was searching for. Thanks !

    • Amrit,
    • August 24, 2011
    / Reply

    So, Sam, I checked out that page scroll at DNA.
    Really slick stuff. :-)

    Any chance you know what they are using?
    I peaked in their code, but I am not shure what is used for what, not completly anyhow, and without some examples and som explanations on how to get it working I probably can’t figure it out.

    Would be really cool if there is a source code for that project. Couldn’t find any though… :-(

      • Sam,
      • August 24, 2011
      / Reply

      Well the system they are using is Silverstripe, so I imagine what they’ve made is fairly tightly knitted in with that, with the Ajax page loading.

      The simple algorithm would just be, onclick of link with a class “ajaxSlide”, get href of the link, slide content area to the left 100%. Use href to request the new page html, once the new html has been loaded, set content area position to 100% right and slide in to the middle again.

      The actual mechanics of it though, is probably quite complex.

      You can find out if a request is Ajax or not. In this case, if it’s an Ajax request, it should only send the new content. If not Ajax (js not enabled), send the whole page HTML, header and footer etc. In Silverstripe it’s quite easy to do that.

  28. / Reply

    i got error in Opera :(

    • John,
    • August 30, 2011
    / Reply

    I’m the developer responsible for DNA.co.nz
    The Ajax transitions aren’t silverstripe code. Although the CMS does allow for different or modified templates depending on whether request is Ajax or not. To view the JavaScript go to http://DNA.co.nz/themes/Base/js/ajax.js

      • Sam,
      • August 30, 2011
      / Reply

      JOHN you are an absolute BOSS.

      Thanks for that.

    • John,
    • August 30, 2011
    / Reply

    Also the only people who use opera are web developers testing in opera. ;)

    • Romain Gravaillac,
    • September 15, 2011
    / Reply

    Hi, I want to do the same thing with a drupal 7 website. By default Jquery is installed in the drupal core. By creating a script.js file and by adding this code : 
    // jQuery for Drupal 7 [BEGIN](function ($) {// [jQuery BEGIN]$(document).ready(function() {// ****************************************************************/* jQuery code here */// ****************************************************************// [jQuery END] });// jQuery for Drupal 7 [END]}(jQuery));

    What about the jquery code ? Any idea?
    Thanks

      • stéfan,
      • March 28, 2012
      / Reply

      hi, in drupal 7 i put the .js in my js directory theme.

      sites/all/themes/mytheme/js

      in mytheme.info i define the url

      scripts[] = js/toto.js

      it works fine for every js

        • stéfan,
        • March 28, 2012
        / Reply

        sory i forgot the js script.
        in drupal is diferent

        jQuery(document).ready(function(){
        jQuery(window).bind(“unload”, function() {
        });
        jQuery(“#page”).css(“display”, “none”);

        jQuery(“#page”).hide();

        jQuery(“#page”).fadeIn(700);
        });

    • selc,
    • September 18, 2011
    / Reply

    Perfect code, exactly what i was looking for… For guys who say that the delay is too long, just change the value in brackets (i did so: $(“body”).fadeIn(800); and $(“body”).fadeOut(500, redirectPage); )

    • elena,
    • September 22, 2011
    / Reply

    hi, this works in joomla 1.6?

    • GuggiTanvi,
    • September 24, 2011
    / Reply

    Hello ALL,
    In JQuery fadeTo () method used to fade element on page. In this article I am trying to show you, how we can implement fadeTo method on the page. For example I have two images on page and I want to images fade from page to given opacity…………………….. for more details please check out the following link…….
    http://mindstick.com/Articles/4d2acc55-de69-48d3-a92b-5277b81fbeea/?JQuery%20fadeTo%20method

    Thanks !!!!!!!!

    • Nado,
    • September 25, 2011
    / Reply

    Hello! The script works beautifully but I have a question. The website I am creating has an iframe. The links on the main page will change everything within the iframe while the main page is constant. I want to be able to click a link on the main page and let ONLY the iframe fade out/in.

    How is that possible?

      • John,
      • September 26, 2011
      / Reply

      $(‘a’).click(function(e) {
      e.preventDefault();
      var href = $(this).attr(‘href’);
      $(‘iframe’).fadeOut(400, function() {
      iframe.attr(‘src’, href).fadeIn(400);
      })
      })

      Something like that?

        • Kevin,
        • November 12, 2012
        / Reply

        I know this is over a year old, but I was wondering how I could turn your little sample into something that automatically runs without clicking. That is, there would be an iframe, and a list of URLs, and the src would fade from one URL to another, with the ability to set a specific run time, or delay, for each URL.

    • Astro,
    • October 2, 2011
    / Reply

    Hi, I use the script in my front page http://www.astrolisto.com/ and I like it a lot.

    And I found a way to not have blank screen after someone click the back button in his browser and it works in browsers IE, Firefox, Chrome. Don’t work in Opera.

    What I done is to insert a line (that I found here http://www.computing.net/answers/webdevel/refresh-a-page-once/196.html ) in function redirectPage() of the custom.js

    function redirectPage() {
    if (location.href.indexOf(‘reload’)==-1) location.replace(location.href+’?reload’);
    window.location = linkLocation;
    }

    I don’t know why, but it works !

    Also in my main.css I have add in the body display: none;

    body {
    ….
    display: none;
    }

    as mentioned above to not have the flash in IE when load the page.

  29. / Reply

    Hi all,

    First of all thanks for showing How to Use jQuery to Make Slick Page Transitions.

    I want to run this transition effect during a page change using a “time in” and “time out”.

    For Ex. 1st page is up for 20seconds and after 20 seconds it fades out to 2nd page like in the demo.

    But this script only allows me to change into the second page using the “click” function and “mouse over” function.

    can anyone help me to overcome this issue.

    Thanks in Advance :)

  30. / Reply

    Thanks, we were looking for something like this for our website

  31. / Reply

    About the ” When it loads, the actual page will flicker, disappear, then fade in…”

    I think this happens because window.load is triggered/run after jQuery.ready().

    So when we bind the effect to load we don’t get the disired effect.

    Mayby a javascript expert can comment on the difference of Window.load and jQuery.ready?

  32. / Reply

    Hi! I am new creating websites and love this plug in. I had a question. I notice this only works with Text as the link or Image. If I’m already using javascript hover to an image and would like my image to be the button to trigger this affect how can I do that?

  33. / Reply

    I like this effect, but I am not so sure how it stacks up against sites with horizontal jquery transition animations. A few good examples of websites that make use of that type of jquery enabled page transitions are the following:

    http://www.spcservicesinc.com/
    http://www.newpathcapital.com/

    • Jason,
    • December 7, 2011
    / Reply

    Guys!!! I need help please. I’m using this plug in but my problem is when I use it as a class the page wont fade out, only fade in the new page. If I change (a.transition) to only (a) on the third line then it works. But my problem is it then disables my pretty photo effect that i have links to. How can i get the fade out to work with the class option (a.transition)?

    • Jedi5150,
    • December 10, 2011
    / Reply

    This whole Jquery thingy is not working for me. I’m gonna go through wordpress.

    • mahdi,
    • December 15, 2011
    / Reply

    Do we have ay verision that changing pages automatically? currently works whenever you clcik, is it possible to change it to Auto?

      • Ross,
      • March 7, 2012
      / Reply

      any luck with the automation?

    • Edward,
    • December 29, 2011
    / Reply

    My page still flickers before fading in for a little bit… has there been a definite fix for this yet? Otherwise this isn’t useful!

    Thanks!

    • caronte,
    • January 12, 2012
    / Reply

    Working great for my test “intro” page.
    I find solution for auto load timing script.
    I try many days for “code it” but nothing to do…
    Can anyone ?
    TY in Adv

    • tester,
    • January 16, 2012
    / Reply

    how i add image loader … between fade

    • SM,
    • January 17, 2012
    / Reply

    Good one, good tutorial to understand better the jQuery, there are so much things in jQuery. Thanks you!

  34. / Reply

    While I truly enjoy this tutorial and will probably deploy this technique in the future, this method is not viable for websites that are already heavily loaded with content. The very simple solution is to:

    1) Create a tag in your style sheet for the HTML element.

    2) Add the attributes from your body tag, like your background image and or your background color.

    Like this …

    html {
    background-color: #ddd;
    background-image: url(images/bg.jpg);
    }

    That’s it. Hit refresh! This workaround works in ALL browsers, even the troublesome Chrome but of course it seems to work best in FireFox.

    • Venkatesh mishra,
    • January 31, 2012
    / Reply

    Hi All,
    This is a superb example. However I need same effect with slide right to left effect. Please help if any one have solution or reference link.

    Just require if click on the left nav full page need to slide and new page will come and if previous page again clicked in nav then it need to slide back.

    • Adam,
    • February 5, 2012
    / Reply

    After a link it clicked to “Page B”, can “Page B” be loaded, then the transition executes?

  35. / Reply

    nice one i love it!

  36. / Reply

    Perfect, thanks a lot! I’m doing a re-design of my portfolio website and I will be using your code

    • Rags,
    • April 4, 2012
    / Reply

    Thanks dear. Very Nic 1.

    • fh-acce,
    • April 12, 2012
    / Reply

    Is there anyway to automate this so that the pages transition without clicking a link?
    Sort of a page by page slide show.

    • Shayda,
    • April 14, 2012
    / Reply

    Hi,

    I’m trying to apply the effect to a div tag which already contains a query application (it’s hosting a video). My menu bar consisting of png files fades in, but not the video. Is this because of the already existing jquery? I event tried making two div tags and a second function in the jquery script.

    Any help would be great -it’s for an assignment due in two days!

  37. / Reply

    Works great… using IE9

    Except with absolutely positioned elements

    • avis,
    • June 3, 2012
    / Reply

    Can you make this transition with previous and next button with a page count in between.

  38. / Reply

    Thanks.

    this code worked with my site ..

    vivek rodake
    india.

    • Ifeanyi,
    • June 19, 2012
    / Reply

    Smooth! Just what I was looking for. Thanks, Dave.

    • you,
    • June 20, 2012
    / Reply

    Hi,

    It is possible to do this transition only for a part of the page ( exemple “main”) and header/footer not fade ?
    thanks in advance

      • Eric,
      • May 8, 2013
      / Reply

      Yes, instead of using body as the selector, change it to the name of your main container div, such as #main

  39. / Reply

    Dude! Awesome. I love it. I wanted something simple like this. Experimenting a lot with 100% custom everything for my personal site (HTML5, CSS3, PHP, jQuery). Still working on it. Thanks!

  40. / Reply

    Hi I’m from Brazil. I use this effect but it’s not working in firefox 14.1, the javascript is not showing the display, the display stay how “none”. Can you help me?

    • Mike,
    • August 3, 2012
    / Reply

    I solved the flicker, though technically I expect it to only be solved for Internet Exploiter but seems to work for Chrome and Firefox too.

    First, in your CSS:

    html {
    background:#000;
    }

    …replace with the same background colour as your body.

    And the, in the head:

    No more flicker, though I’ve only tested on the local development environment and haven’t had a chance to try it live where page loading times will be longer.

    • Mike,
    • August 3, 2012
    / Reply

    Seems the HTML was stripped out of my previous comment.

    As I was saying, in the head:

    (Just fix up the spacing).

    • Mike,
    • August 3, 2012
    / Reply

    Oh FFS. The word commenting system in history. Sorry I can’t past the HTML here because it keeps getting stripped out.

    Go here instead: http://pastie.org/4382811

    • Tapashi,
    • August 6, 2012
    / Reply

    can i use slide instead of fadeIn fadeOut Effect?If yes,then what is the procedure??

    • Michele,
    • August 24, 2012
    / Reply

    I am trying to make it work with internal links but the page doesnt load anymore…

    • gndoe,
    • November 7, 2012
    / Reply

    Hello, I know this is an old tutorial but i wonder if it is possible to have the load fade have an different effect on every div, for example i want content and content to fade in at different speeds, so maybe div a i want to fade in for 1second and div b i want to fade in for .6seconds, is this possible? thanks for this tutorial great funny idea for a beginner like me!

  41. / Reply

    Thanks a lot, was very helpful, I like to use also another type of transition, can you help me with this??? or post some useful links.
    Thanks again!

    • JK,
    • December 5, 2012
    / Reply

    I love this fade in/out! I’ve been using this, but recently I added a lightbox script to one page and now the fade in/out is not working for that specific page. When I delete the links to the lightbox.j.s, scriptaculous.js, and prototype.js files, then the fade in/out works again. Any ideas on how to fix this?

  42. / Reply

    Very useful tool. This is becoming ever-popular with the transitions. Hulu, in particular, is using a variation of this effect. It would be nice to update the download package and demo with the revision on using the Back button in the browser.

    It wasn’t a huge deal, but I had to read through the comments to find that and it would be nice to have an amendment to the blog if you could.

    Otherwise, awesome, just what I was looking for.

    • micker,
    • December 31, 2012
    / Reply

    it possible to adding more transition (sliding down are other) ?
    regards

    • ram,
    • February 7, 2013
    / Reply

    Great work dave. keep post like this useful jquery tutorials.

    • Konrad,
    • March 11, 2013
    / Reply

    Hey everyone, I’m a JS newb, in fact I have barely even been acquainted with JS.
    Anyway, I got it working with the code below.

    I did encounter one problem though.

    In the JS below, I noticed that if you do not specify a class or ID selector for the link (a) then – when clicking on the “back to top” button (that is sometimes found at the bottom of a page – and is found on my page) your page will go back to the top but it will fade out and stay faded out! (not a good thing).

    The only way that I barely managed to solve this was to appoint either a class or ID selector to the A link.
    You can see it in the code below “a.tot” (tot is my class selector) Without the class selector, every link on the page functions with the fade effect (that is an advantage), but the “back to top” button malfunctions, or does something strange. It does as explained above.

    $(document).ready(function() {
    $(window).bind(“unload”, function() {
    });

    $(“body”).hide();
    $(“body”).fadeIn(1000);

    $(“a.tot”).click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $(“body”).fadeOut(1200, redirectPage);
    });

    function redirectPage() {
    window.location = linkLocation;
    }
    });

    • dan,
    • May 7, 2013
    / Reply

    How to disable this effect in ie 8 and down?

    • Pig,
    • July 13, 2013
    / Reply

    I have the same issue as chk. Is there anyway to resolve it?

    That is, the page loading blank in Firefox after pushing the back button in your browser window…

    • rgdontario,
    • July 15, 2013
    / Reply

    Could you actually provide this script? I’m not seeing it in the source code..

  43. / Reply

    What if I wanted just one specific DIV to use the transition — not the entire body? Maybe I want to keep my header solid but add this transition effect to just the main DIV below? I tried changing the word “body” in the custom.js file to “container” (the name of my main DIV). That didn’t work. The whole thing transitioned.

      • NuT^CrAcKeR,
      • May 8, 2016
      / Reply

      Everywhere you see $(“body”) change to your div name, (eg). $(“#allPages”)

    • Ángel Luis González Fernández,
    • August 28, 2013
    / Reply

    Why would the script work in .fadeIn but not .fadeOut?

    • Neeraj Morar,
    • October 20, 2013
    / Reply

    Thanks for this, it works brilliantly – both on PC and mobile!

    • Chris,
    • February 5, 2014
    / Reply

    is there another to capture the page transition event, rather than having to assign a class to an anchor element? I’m thinking to capture every mouse click event, evaluate it to see if a redirection to another page is happening and then apply the transition. Reason being I already have classes applied to links and I can’t assign another. Or do you have another idea? Cheers

    • Caroline Bernard,
    • June 23, 2014
    / Reply

    My only problem is that I have many, many fixed div and when I click to the next page it’s only the body that is fading not the fixed div so I need that it fade everything, the entire page including fixed div great transition by the way

    • Rahul,
    • June 27, 2014
    / Reply

    The demo page is showing something else

    • BlackHillll,
    • February 16, 2015
    / Reply

    the code still work in my site! thanks so much!!!

    • cj,
    • May 2, 2015
    / Reply

    Demo link broken takes you to drag and drop demo

    • aidanoxp,
    • May 4, 2015
    / Reply

    Hi All, the demo links have been updated. Sorry for any confusion. Thanks.

    • Avalonica,
    • June 2, 2015
    / Reply

    If I externalise the script I get an error saying “TypeError: undefined is not a function (evaluating ‘$(document)’)” – referring to the first line of the javascript “$(document).ready(function() {”

    UPDATE: I know why I had the problem – it’s because I’m on a WordPress site and “jQuery” should take the place of the variable name (the “$” sign) – more on it here:
    http://stackoverflow.com/questions/7975093/typeerror-undefined-is-not-a-function-evaluating-document

    • AKill,
    • August 21, 2015
    / Reply

    I’ve fixed the flickering thing happening on page load.
    Just add a css transition and delete the fade in and display:none part of the code, and add this to your css:
    body {
    animation: myfadeInAnimation 2s;
    }

    @keyframe myfadeInAnimation {
    from {opacity: 0;}
    to {opacity: 1;}
    }
    @-webkit-keyframes myfadeInAnimation {
    from {opacity: 0;}
    to {opacity: 1;}
    }

    • Lahiru SupunChandra.,
    • August 24, 2015
    / Reply

    wow awesome.. it’s working brother.. Thank You… !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals