CSS | JQuery | JavaScript | Tutorial

How to add a webpage fade-in effect using JQuery

THE PROBLEM: HTML pages that have numerous and complex nested <div> tags and CSS can sometimes have a jumbled “assembling” appearance that happens as the page is loading and the various elements are being rendered by the browser. The appearance of this process can look quite unrefined and detract from professional appearance of the site.

A SOLUTION: JQuery includes a function to fade-in a hidden tag. If the content of the page is initially hidden using CSS, it then can be faded-in using JQuery once the whole page has been processed and is ready for display.

Step 1

Inside the page’s <body> tag, enclose the content in a <div> tag with a unique CSS id (see this post for the difference between CSS ids and classes).

<body>
 
<div id="content-wrapper">
 
The page content goes here!
 
</div><!-- content-wrapper -->
 
</body>

Step 2

Inside the page’s <head> tag, import the JQuery library (download it here) and create a fade-in effect on the <div> tag surrounding the page’s content. Key to this solution is that the effect gets placed inside JQuery’s $(document).ready() function, ensuring the fade begins after the document’s DOM has been completely parsed.

<script type="text/javascript" src="jquery.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function() 
{
		// fade in content.
		$( '#content-wrapper' ).fadeIn("slow");		
});
</script>

Step 3

At this point the fade-in effect will not occur, because the content is not hidden to begin with. To correct this add some CSS styling underneath the JavaScript above to hide the page content initially.

<style type="text/css">
 
#content-wrapper
{
	display:none;	
}
 
</style>

Step 4

Now the fade-in effect will work, however, a problem exists. If someone visits the page and has JavaScript turned off in their browser, the CSS to hide the content will be applied, but the JQuery to fade it back into visibility will not run, leaving the page effectively blank. This is a serious accessibility issue. To correct this, instead of hardcoding the <div> tag that is wrapping the content, write the tag using JavaScript. That way if JavaScript is turned off, the tag will not be rendered and won’t hide its containing content. Change what was written in Step 1 to the following:

<body>
 
<script type="text/javascript">
<!--//--><![CDATA[//><!--
document.write( '<div id="content-wrapper">' );
//--><!]]>
</script>
 
The page content goes here!
 
<script type="text/javascript">
<!--//--><![CDATA[//><!--
document.write( '</div><!-- content-wrapper -->' );
//--><!]]>
</script>
 
</body>

Putting it all together you end up with this (remember to include the JQuery library in the same folder as this HTML page):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fade-in effect example</title>
 
<script type="text/javascript" src="jquery.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function() 
{
		// fade in content.
		$( '#content-wrapper' ).fadeIn("slow");		
});
</script>
 
<style type="text/css">
 
#content-wrapper
{
	display:none;	
}
 
</style>
 
</head>
 
<body>
 
<script type="text/javascript">
<!--//--><![CDATA[//><!--
document.write( '<div id="content-wrapper">' );
//--><!]]>
</script>
 
The page content goes here!
 
<script type="text/javascript">
<!--//--><![CDATA[//><!--
document.write( '</div><!-- content-wrapper -->' );
//--><!]]>
</script>
 
</body>
</html>

This entry was posted on Friday, August 28th, 2009 at 10:19 am and is filed under CSS, JQuery, JavaScript, Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.