WP-Mix

A fresh mix of code snippets and tutorials

Fade in page content with jQuery

Author: Jeff Starr
Category: JavaScript
Updated: June 23, 2020

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:

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

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

★ Pro Tip:

‹ PHP Compress CSS & JavaScript

Get all meta data for WordPress user ›

About the Author

Jeff Starr is a professional developer, designer, author, and publisher with over 15 years of experience. He writes books and tutorials, develops plugins, and runs his own business.

About the Site

WP-Mix is where I share code snippets, tricks, and tips. WP-Mix was launched in October 2012, and now features 414 posts. You can check out the latest post published on Aug 29, 2024. Learn more ›

Contact

A few ways to connect:

WP-Mix

Fade in page content with jQuery

Method 1: Sequential fade in (divs)

Method B: Complete fade in (body)

Step 1: HTML

Step 2: CSS

Step 3: JavaScript

★ Pro Tip:

WordPress Resources

Subscribe to WP-Mix

Project Demos

Popular Posts

Recent Posts

Random Posts

RSS Feed

About the Author

About the Site

Contact