Animation in jQuery Effects
We can create animations using animate()
method in jQuery. We can animated all css properties which have single numeric value. Non-numeric properties cannot be animated using basic jQuery(For example background-color cannot be animated). The default animate()
duration is 400 milliseconds.
The following example shows, how to animate a div box using animate()
method in jquery.
Example 1:
<html lang="en"> <head> <title>.animate() in jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <style> #box{ height:50px; width:50px; background:red; position:relative; } </style> </head> <body> <input type='button' value='Click' id='btn'> <div id='box'></div> <script> $(document).ready(function(){ $("#btn").click(function(){ $("#box").animate({ width:'70px', height:'70px', },1000).animate({ left:'100px', }).animate({ top:'100px', }).animate({ left:'0px', }).animate({ top:'0px', opacity:0, }); }); }); </script> </body> </html>Try it Yourself
The following example show, how to change background color while animating a div box using step
callback function in jquery
Example 2:
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> <input type='button' value='Click' id='btn'> <br><br> <div style='position:absolute; left:10; top:50; width:80px; height:80px; background:green; border:1px solid red;' id='box'></div> <script> $(document).ready(function(){ $("#btn").click(function(){ $("#box").animate({ left:"50px", top:"100px", width:"120px", height:"120px", borderWidth:"5px", opacity:"0.5", },{ duration:1000, step:function(){ $(this).css({'background-color':'#ccc'}); }, specialEasing:{ top:"linear", left:"swing", }, complete:function(){ $(this).html("<h3 style='color:white;text-align:center;'>Hello!!!</h3>"); } } ); }); }); </script> </body> </html>Try it Yourself
Example 3:
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> <input type='button' value='Start' id='btn'> <br><br> <div style='position:absolute; left:10; top:50; width:80px; height:80px; background:green; border:1px solid red;' id='box'></div> <script> $(document).ready(function(){ $("#btn").click(function(){ $("#box") .animate({left:"50px",top:"100px"},500) .animate({height:"100px"},500) .animate({width:"120px"},500) .animate({borderWidth:"5px"},500); }); }); </script> </body> </html>Try it Yourself