Blog

Custom Animations in jQuery

20 September, 2018

Related Blogs

jQuery Custom Animations

The syntax of jQuery’s method for making custom animations is: $(selector).animate({params},[duration],[easing],[call-back]) The key parameter is params , it defines the CSS properties that will be animated. Many properties can be animated at the same time: animate({width:”70%”.opacity:0.4,marginLeft:”0.6in”,fontsize:”3em”}); The second parameter is duration. It specifies the speed of the animation. Possible values are “fast”,”slow”,”normal”,or milliseconds.   Example  <html> <head> <script type=”text/javascript” src=”jQuery.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(“button”).click(function() { $(“div”).animate({height:300},”slow”); $(“div”).animate({width:300},”slow”); $(“div”).animate({height:100},”slow”); $(“div”).animate({width:100},”slow”); }}; }}; </script> </head> <body> <button>Start Animation</button> <br/><br/> <div style=”background:#98bf21;width:100px;height:100px;position:relative”> </div> </body> </html> Example  <html> <head> <script type=”text/javascript” src=”jQuery.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(“button”).click(function() { $(“div”).animate({left:100px},”slow”); $(“div”).animate({fontsize:”3em”},”slow”); }}; }}; </script> </head> <body> <button>Start Animation</button> <br/><br/> <div style=”background:#98bf21;width:200px;height:100px;position:relative”>HELLOM</div> </body> </html>   Note HTML elements are positioned static by default and cannot be moved. To make elements moveable, set the CSS position property to fixed, relative or absolute.