jQuery Effect Animate() Method
Use of jquery animate() method for create custom animation in our document. Custom animated crated by set different type of CSS properties. For example: size, border size, margin, padding etc. When event is occurs then properties value will be change. jquery animate() method only work on numertic value as like (height 500px). Its not work on string value as like (Color:green).
Syntax
(selector).animate({styles:value}) |
Example
In this example div width size is 100px when we click on button then size will be change 250px.
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#but").click(function () { $("#abc").animate({ width: "250px" }); }); }); </script> </head> <body> <div id="abc" style="background:blue;height:75px;width:100px;"> </div> <button id="but">click me</button> </body> </html> |
Output
Before click
![beforeclick.jpg]()
After click
![afterclick.jpg]()
You may also want to read these related articles: here