Jquery Animate On Page Load

Jquery Animate On Page Load

You can animate the page while loading. Let’s see how to use fadeIn effect on page load.

Example: Example below attaches fadeIn effect to body of the page. It first displays none and then fade in with interval 2000 milliseconds.

<html>
<head>
   <title>Jquery Page Load Animation</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
   <script type="text/javascript" language="javascript"> 
   
   $("document").ready(function(){
       
     $("body").css("display","none");
     $("body").fadeIn(1500);  
      
   });
   
   </script>
    
</head>
<body>
<div id="content">
<div>
This is example of Jquery Page Transition. We are using fadeIn function.
</div>    
    <a href="HTMLPage.htm" > Call page</a>
    <br/>
    <a href="HTMLPage.htm" > Any link</a>
</div>
</body>
</html>

Copy above code into notepad and save it as test.html then open it in browser to see how page load animation works.

Tags:

JQuery Animate Div Height and WidthHow to check image is loaded using JQueryBasics of jqueryLearning JqueryJQuery Page RefreshJQuery Page Transitionasp net image uploadGoogle JQuery CDNJQuery SlideAsp.net File UploadJquery Trim String

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.