jQuery - Animation Effects
jQuery animation effects are used to create custom a animation. It uses CSS properties for animation.
jQuery animation effects are used to create custom a animation. It uses CSS properties for animation.
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:
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 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.
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.
You can also assign non-numeric string values such as 'show', 'hide', and 'toggle' to the animation property's value.
Jquery's chaining features are used to animate multiple CSS numeric properties of an element one by one individual in a queue.