WP-Mix

A fresh mix of code snippets and tutorials

Fade in page content with jQuery

Here are two simple techniques to fade in page content with jQuery. The fade-in effect isn’t for everyone, but it’s a nice tool to have in the box.

Method 1: Sequential fade in (divs)

In this scenario, the HTML page would be constructed with something like this:

<body>
	<div class="fadein"></div>
	<div class="fadein"></div>
	<div class="fadein"></div>
</body>

..such that all page content is contained within a div.fadein element. Then, to sequentially fade in the page content, apply the following jQuery snippet:

// fade in divs
var fadein = $('div.fadein');
$.each(fadein, function(i, item) {
	setTimeout(function() {
		$(item).fadeIn(1000); // duration of fadein
	}, 1000 * i); // duration between fadeins
});​

You may want to fine-tune the durations in order to achieve the desired effect.

Method B: Complete fade in (body)

This method is even simpler, requiring a single slice of code to achieve a nice fade-in effect for the entire page at once:

$('body').fadeIn(1000);

This works great, but requires the <body> element to be set as display:none; with CSS, which is just a horrible idea because users without JavaScript won’t be able to see the content.

A better way of doing it requires a bit more code handling, but ensures that content is available to everyone, JS-enabled or not. The idea is to hide body content only if JavaScript is available. Here are the steps:

Step 1: HTML

Add the following class to the <html> element:

<html class="no-js">

Step 2: CSS

Next, add this snippet of CSS however you’d like:

.js body { display: none; }

Step 3: JavaScript

Ensure jQuery is included and add this JavaScript snippet to the <head> element:

<script>document.documentElement.className = document.documentElement.className.replace('no-js','js');</script>

Then add this slice of jQuery to the footer area (just before the closing </body> tag):

$('body').fadeIn(1000); // fadein time in ms

That’s it. Here’s what’s happening with this technique:

  1. When the page loads, the .no-js class is replaced with .js via JavaScript
  2. CSS is used to “hide” the <body> element via the .js class
  3. The page content then fades in thanks to jQuery

To see this technique in action, check out WP-Tao.com :)

★ Pro Tip:

Banhammer ProWizard’s SQL Recipes for WordPressSAC Pro