jQuery animate() method

Animate() is one of the most powerful method in jQuery library used for applying simple animation and effects. It is used to perform custom animation on a set of CSS properties of a object. Animate() is able to animate only numeric values like margin:10px but it can't animate any string value like background-color: red.

We use "+=" or "-=" for relative animations.

For example:



ShowCode/HideCode

$(document).ready(function(){
$("#btn1").click(function(){
$("#image1").animate({width:"500px",height:"500px", borderWidth:"5px"},1000);
});
});

Another Example using Animate() method:

Hello

ShowCode/HideCode

$(document).ready(function(){
$("#btn2").click(function(){
$("#div1").animate({width:'250px',height:'150px', opacity:'0.3', fontSize:'5em', left:'200px'},"slow");
});
});