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.

Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +