«
»

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.

10 Responses to “How to add a webpage fade-in effect using JQuery”

  1. Scott Sawyer Says:
    February 13th, 2010 at 10:32 pm

    Works great! Thanks for the tutorial!

  2. Zee Says:
    February 17th, 2010 at 5:26 am

    Is this the same effect that mashable been using. Notice that their content fade into view as i scroll further down.

  3. Ans Says:
    February 17th, 2010 at 6:20 am

    From my brief look at the source, it looks like they are not using JQuery, but it could be hidden somewhere.

  4. Paul Says:
    February 23rd, 2010 at 10:44 pm

    Hi,

    Excellent tutorial, got it to work on a webpage i am trying to get a contract for and i know nothing of jquery or even much about java…….One thing though… is it possible to get it to fade in over the old page..if you look at my example above…if you click on the left link..the screen goes white before fading in the new page…i need it to just fade in….or cross fade…. how would i accomplish this?

    as you see from the example…every page is built like this…each page has a full screen picture behind it..and they want seamless…but i dont want to do it in flash…..

    Thanks for your excellent tutorial again and look forward to hearing from you….

    Cheers

    Paul

  5. Ans Says:
    February 24th, 2010 at 2:33 am

    Hi Paul!

    Thanks for your comment and the kind words. What you need to do is have another div around the “content-wrapper” div and move your background image to this outer div. As it is now, the thing that is getting faded—the content-wrapper div—also has your background image inside of it, so as it fades in, so too does your background image.

  6. Nem Says:
    March 1st, 2010 at 11:08 pm

    Mashable is using Jquery too!
    Use this Firefox addon to see what JScript framework’s being used https://addons.mozilla.org/en-US/firefox/addon/10083

  7. Ans Says:
    March 1st, 2010 at 11:20 pm

    Hi Nem, thanks for the link and correction!

  8. David Says:
    March 9th, 2010 at 4:23 pm

    Hi – this is just what I was looking for and all works well in Firefox and Chrome but can’t get it to work in Internet Explorer 8. I’ve used the ‘content-wrapper’ div around a section of page content – not the entire page. Thanks.
    Dave.

  9. Ans Says:
    March 9th, 2010 at 4:27 pm

    Hi Dave,

    What does it do?

  10. Ans Says:
    March 10th, 2010 at 2:24 am

    Hi Dave,

    It appears to not like position:absolute CSS attributes being set inside a div that is being faded. Possibly this is a JQuery issue? At any rate keep to the default positioning, you should be able to layout your page without using absolute positioning.

    Cheers!

Leave a Reply