JQuery is really a powerful and handy JavaScript library. The page or content loading effect is very easy to implement in jQuery. Here’s a example to make your web page content display a fade in page loading effect. It will make your reader a shock impression. :)

The idea is simple ~

1. Create a div block with content hide

This div block is use to implement content fade in page loading effect.

<div id="page_effect" style="display:none;">
<!-- this content is hide, need jQuery to fade in -->
</div>

2. jQuery fadeIn effect

Create a jQuery fadeIn effect when document is ready to display

$(document).ready(function(){	
	$('#page_effect').fadeIn(2000);
});

P.S fadeIn() is the jQuery library build in function.

3. Demo

Try Demo

Complete jQuery codes to implement the fade in loading effect.

<html>
<head>
<title>JQuery Page Loading Effect</title>
 
<script type="text/javascript" src="jquery.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
	$('#page_effect').fadeIn(2000);
 
});
 
</script>
<body>
 
<div id="page_effect" style="display:none;">
 
<h1>JQuery Page Loading Effect</h1>
 
    This is page loading effect with JQuery 1<BR>
    This is page loading effect with JQuery 2<BR>
    This is page loading effect with JQuery 3<BR>
    This is page loading effect with JQuery 4<BR>
    This is page loading effect with JQuery 5<BR>
    This is page loading effect with JQuery 6<BR>
    This is page loading effect with JQuery 7<BR>
    This is page loading effect with JQuery 8<BR>
    This is page loading effect with JQuery 9<BR>
    This is page loading effect with JQuery 10<BR>
    This is page loading effect with JQuery 11<BR>
    This is page loading effect with JQuery 12<BR>
    This is page loading effect with JQuery 13<BR>
    This is page loading effect with JQuery 14<BR>
</div>
 
</body>
</html>
This article was posted in JQuery category.

Related Posts