jQuery Animation Effect

jQuery - Animation Effects

jQuery animation effects are used to create custom a animation. It uses CSS properties for animation.

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.

Source Code

Try it now

Attention: Please keep in mind that every HTML has static position by default hence it can not animated. To animate HTML element, you have to change the HTML element position properties such as "relative", "absolute" or "fixed".

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.

Source Code

Try it now

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.

Source Code

Try it now

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.

Source Code

Try it now

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.

Source Code

Try it now