What is the jQuery animate method?

A powerful feature of jQuery is animation method to use in web pages in an easy way. We know how CSS powers HTML in styling or presenting web documents for good user experience. How about animating CSS styles/properties using jquery?

The jQuery animate() method is used to create custom animations on the basis of certain CSS properties.

In this chapter, we will go through how to use animate() method along with CSS properties that can be used for animations.

Syntax of jQuery animate() method

 $(selector).animate({css_properties},duration, easing, complete);


Selector = can be an element like div, p, etc.

css_properties = CSS properties to be given here to be used for animation – see examples below
Duration = Optional parameter that specifies the hide speed with possible values of

  1. “slow”
  2. “fast”
  3. Or value in milliseconds

Easing = [optional] Specifying transition function value here with possible values of ‘swing’ and ‘linear’. Linear moves animation at a constant speed from start to end.

Complete = after the animate() method is completed, an optional callback function to perform the certain action can be given.

Below are few examples of animation using jquery with different CSS properties.

An example of animating the height

Experience this example online

Example of animation for width of DIV block

Experience this example online

animate jQuery for height and width (using multiple CSS properties)

The example below uses multiple CSS properties (height and width) to animate DIV element of the document.

Experience this example online

Queue functionality – First width then height example

In this example, multiple jquery animate() calls will be used for animation. jQuery by default creates an internal queue for animate() calls. This is very useful if the first animation is required to be completed and then starting the second and so on animations.

In above example, as we seen height and width animation of DIV executed simultaneously. In the following example, first width animation will be completed followed by height.

Experience this example online

Animating Text with jquery animate()

Below example will first animate width and height and then increase the font size of text with animation.

Experience this example online

jquery animate opacity example

Opacity defines to which extent make elements hidden. It ranges from 0 to 1. Where 0 make elements hidden and 1 completely visible. Below example shows how to use opacity in animate() method of jquery.

The opacity parameter is used inside CSS properties area.

Experience this example online

The animate easing example

As we have seen in jQuery animate() syntax, it used an optional easing parameter. The easing Specifies transition with possible values of ‘swing’ and ‘linear’.

  • Linear moves animation at a constant speed from start to end.
  • Swing moves animation slower at the beginning and end while faster in middle.

Example of using easing

Experience this example online

You can use jqueryui’s library for more easing effects. This is library that can be included:

<script src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js”></script>

Example of using jqueryui’s library

Experience this example online

For complete reference go to http://jqueryui.com/effect/#easing