jQuery - Animation Effects

jQuery animate() Method

The animate() method animates only numeric CSS properties such as margin, padding, opacity, top, left, height, width. It can not animate CSS non-numeric properties such as "color" and "background-color".

Following is a jQuery animate() method general syntax:

Explanation of the jquery parameters:

• params: This is a required parameter that specifies numeric properties of CSS.
• speed:This is an optional parameter that indicated the duration of an animation effect and it has predefined string values such as "fast", "slow", or in a number of milliseconds.
• callback: It is also an optional parameter that works after the completion of the animation() method effect.

jQuery animate() Method Using CSS Multiple Properties

jQuery animate() method can take multiple numeric CSS properties such as margin, padding, opacity, top, left,height,width to animate HTML element.

Please keep in mind that CSS properties that are used inside the animate() method will be in the form of camel-case. If you want to animate the 'margin-left' property then you have to write "marginLeft" inside the animate() method.

jQuery animate() Method Using Relative Values

Relative value can be assigned to the CSS numeric properties by assigning += or -= in front of the value. Basically, it is relative to the element's current value.

jQuery animate() method With Predefined Value

You can also assign non-numeric string values such as 'show', 'hide', and 'toggle' to the animation property's value.

Animation of CSS Multiple Properties One By One Or Queued Animation

Jquery's chaining features are used to animate multiple CSS numeric properties of an element one by one individual in a queue.