animate()

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

Syntax:

snippet

$(selector).animate({params}, speed, callback);

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.

snippet

A simple animation example:

Output:

A simple animation example:

Note

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.

snippet

Output:

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.

snippet

Output:

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.

snippet

Output:

jQuery Color animation

You can also animate the properties of elements between colors.

snippet




  
  jQuery UI Effects - Animate demo
  
  
  
  
  



  
    Animate
    rookienerd.com is the best tutorial website to learn Java and other programming languages.