jQuery animate() Effect

The jQuery animate() method gives full control over the animation. This is used to create custom animations. It animates of a set of css properties.

Syntax of animate() effect

$(selector).animate(properties, speed, easing, callback) 

The properties are the required parameter. It specifies css properties and its value for the animation. The speed parameter specifies either in milliseconds or a few predefined strings, slow and fast. The by default animation speed is 400 milliseconds. The easing parameter specifies the speed that the animation should run at different points within an animation. jQuery supports two easing methods: linear and swing. The callback function is called after the animation completes.

Example

<style>
.demobox { 
width: 200px; 
height: 150px; 
padding: 25px;
border: 4px solid black;
background-color: #FFFF33;
}
</style>

<div id="demo" class="demobox"> Hello World!</div>
<button id="btn">Start Animation</button>

<script>
$(document).ready(function(){
$("button#btn").click(function() {
$("div#demo").animate({
"width": 400,
}, {
"duration": 500,
"easing": "linear",
"complete": function() { 
	alert("finished!"); 
}
});
});
});
</script>

Output of the above code

Hello World!

In the above example, when the user click on the 'Start Animation' button, the div box of 'demo' id get animated according to the given animation effect.