JQuery Page Transition

JQuery Page Transition

You want to give animation effect to page at the time of loading it. Jquery provides an easiest way to do that. Let’s see example.

You can copy below code into text file and save it as xyz.html. Open it in browser and click on button to see page transition effect in action.

<html>
<head>
   <title>Jquery Page Transition </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(){
   
   $("#Button1").click(function(){
   
     $("body").css("display","none");
     $("body").fadeIn(3000);
   
   });
   
   });
   
   </script>
    
</head>
<body>
<div id="content">
<div>
This is example of Jquery Page Transition. We are using fadeIn function.
</div>
    <input id="Button1" type="button" value="Reload Page." />
</div>
</body>
</html>

Description: Once user click on button we are making body to display none using below code.

$("body").css("display","none");

After that we are adding fadeIn animation effect which displays body page after 3000 milliseconds.

You can also see this effect as a default by adding button click event code into on ready state of the document.

Tags:

Jquery Animate On Page LoadLearning JqueryBasics of jqueryJQuery Page RefreshJQuery SlideJquery Trim StringJQuery Animate Div Height and WidthGoogle JQuery CDNHow to call function in JQueryAsp.net JQuery Calendar ControlJQuery Hello World Example

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.