Javatpoint Logo
Javatpoint Logo

jQuery animate()

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
Next TopicjQuery delay()

Let's Work Together!

Javatpoint is passionate to offer better content to the world. Please mail your contribution to We will show your name and create your user profile. You can contribute the following things:
  • Article on Any Topic (which is not available on Javatpoint)
  • Your Interview Experience on Company
  • Company Interview Questions with Answers
  • Recruitment Process of Company
  • Programs, and Algorithm
  • Videos
  • Test Paper
  • Improve Article

Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials