83

jQuery animate()

The jQuery animate() method provides you a way to create custom animations.

Syntax:

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

Output:

Start Animation

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

Output:

Start Animation

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

Output:

Start Animation

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

Output:

Start Animation

jQuery Color animation

You can also animate the properties of elements between colors.

Test it Now