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.

Getting Started With HTML/CSS

To begin, let’s dive straight into the CSS. We’ll need to change the CSS for the

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.

continue reading…