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.
About Author
Name
TekSlate
Author Bio
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills .