Advanced Search

Page Loading Effects With jQuery

/ Published in: jQuery
Save to your folder(s)
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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2. <head>
  3.    <title>JQuery Page Loading Effect</title>
  4.    <script type="text/javascript" src="jquery.js"></script>
  5.    <script type="text/javascript">
  6.      $(document).ready(function(){
  7.        $('#page_effect').fadeIn(2000);
  8.      });
  9.    </script>
  10. </head>
  11. <body>
  12. <div id="page_effect" style="display:none;">
  13.  <h1>JQuery Page Loading Effect</h1>
  14.  
  15.     This is page loading effect with JQuery 1<BR>
  16.     This is page loading effect with JQuery 2<BR>
  17.     This is page loading effect with JQuery 3<BR>
  18.     This is page loading effect with JQuery 4<BR>
  19.     This is page loading effect with JQuery 5<BR>
  20.     This is page loading effect with JQuery 6<BR>
  21.     This is page loading effect with JQuery 7<BR>
  22.     This is page loading effect with JQuery 8<BR>
  23.     This is page loading effect with JQuery 9<BR>
  24.     This is page loading effect with JQuery 10<BR>
  25.     This is page loading effect with JQuery 11<BR>
  26.     This is page loading effect with JQuery 12<BR>
  27.     This is page loading effect with JQuery 13<BR>
  28.     This is page loading effect with JQuery 14<BR>
  29.   </div>
  30. </body>
  31. </html>

URL: http://simply-tutorial.com/blog/2008/11/29/page-loading-effects-with-jquery/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.