Custom Animations in jQuery
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.
You liked the article?
Like : 0
Vote for difficulty
Current difficulty (Avg): Medium
About Author
Name
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 in the market.
Stay Updated
Get stories of change makers and innovators from the startup ecosystem in your inbox