JQuery effect-animate () method

Instance

Change the height of the "div" element:

$ (". Btn1"). Click (function () {  $("#box").animate({height:"300px"}); });

Try it yourself.

Definition and usage

The animate () method executes a custom animation of the CSS property set.

This method changes the element from one state to another through CSS styles. CSS property values are changed gradually so that you can create animation effects.

Only numeric values can create animations (such as "margin:30px"). String values cannot create animations (such as "padding:0px; border:0px; line-height:21px; " > Note: use "+ =" or "-=" to create a relative animation (relative animations).

Syntax 1

$ (selector). Animate (styles,speed,easing,callback)

Parameters	Description
Styles	Required. Specifies the CSS style and values that produce the animation effect. Possible CSS style values (provide instance): backgroundposition borderWidth Bor Derbottomwidth borderleftwidth borderrightwidth bordertopwidth Borderspaci ng margin marginbottom marginleft marginright margintop Outlinewidth padding Paddingbottom paddingleft paddingright paddingtop Height width MaxHeight MaxWidth MinHeight MinWidth Font fontSize Bottom left Right Top letterspacing wordspacing Lineheight textindent Note: CSS styles are set using DOM names (such as "fontSize") rather than CSS names (such as "font-size").
Speed	Optional. Specifies the speed of the animation. The default is "normal". Possible values: milliseconds (e.g. 1500) "Slow" "Normal" "Fast"
Easing	Optional. Specifies the easing function that sets the animation speed in different animation points. Built-in easing function: Swing Linear More easing functions are available in the extension.
Callback	Optional. The function to execute after the animate function finishes executing. To learn more about callback, please visit our JQuery callback chapter.

Syntax 2

$ (selector). Animate (styles,options)

Parameters	Description
Styles	Necessary. Specifies the CSS style and value (IBID.) that produce the animation effect.
Options	Optional. Additional options for the specified animation. Possible values: Speed-Sets the velocity of the animation Easing-Specifies the easing function to be used Callback-Specifies the function to be executed after the animation is completed Step-Specifies the function to be executed after each step of the animation is completed Queue-Boolean value. Indicates whether the animation is placed in the effect queue. If False, the animation will start immediately Specialeasing-the mapping of one or more CSS properties from the styles parameter, and their corresponding easing functions

JQuery effect-animate () method