jQuery animate | How to animate in jQuery with 5 demos

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 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);

Where

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

jQuery animate

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.

jQuery animate Queue

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.

jQuery animate text

Experience this example online

jquery animate opacity example

Click here for animate with opacity

jquery animate easing

Click here to learn how to use jQuery animate easing