The jQuery animate method can be used to create a custom animation of your HTML elements simply with the use of CSS properties. This animate method modifies an element’s style property in a gradual manner to create the animation effect.
The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties similar to the one that can be sent to the .css() method. Use += or -= for relative animations.
Syntax
$(selector).animate({styles},speed,easing,callback)
Styles
The styles listed in the following table use the DOM naming convention, not CSS. For example note that paddingLeft is not padding-left.
- backgroundPositionborderBottomWidthborderLeftWidthborderRightWidthborderSpacingborderTopWidthborderWidthbottomfontfontSizeheightleftletterSpacinglineHeightmarginmarginBottommarginLeftmarginRightmarginTopmaxHeightmaxWidthoutlineWidthpaddingpaddingBottompaddingLeftpaddingRightpaddingToprighttextIndenttopwidthwordSpacing
HTML Example
We will use the following HTML for the examples listed below.
;Example
The div with a number of different properties.
