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


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.