The jQuery animate() method provides you a way to create custom animations.
Here, params parameter defines the CSS properties to be animated.
The speed parameter is optional and specifies the duration of the effect. It can be set as "slow" , "fast" or milliseconds.
The callback parameter is also optional and it is a function which is executed after the animation completes.
Let's take a simple example to see the animation effect.Test it Now
A simple animation example:
Note: The default position of all HTML elements is static. If you want to manipulate their position, set the CSS position property to the element to relative, fixed or absolute.
jQuery animate() method using multiple properties
You can use multiple properties to animate at the same time.Test it Now
jQuery animate() method using relative values
You can also define relative values (it is relative to the element's current value) by putting += or -= in front of the value.Test it Now
jQuery animate() method using predefined value
You can also specify a property's animation value as "show" , "hide" , or "toggle".
In this example, we are using "toggle" value for height, it means it will show/hide the selected element.Test it Now
jQuery Color animation
You can also animate the properties of elements between colors.Test it Now