JQuery effect-animate () method

Http://www.w3school.com.cn/jquery/effect_animate.asp

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 "background-color:red").

Note: use "+ =" or "-=" to create a relative animation (relative animations).

Syntax 1

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

Parameters	Description
Styles	is required. Specifies the CSS style and values that produce the animation effect. Possible CSS style values (provide instance): backgroundposition borderWidth bo Rderbottomwidth borderleftwidth borderrightwidth bordertopwidth Borderspac ing 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 the DOM name (such as "fontSize"), not the CSS name (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	required. Specifies the CSS style and value (IBID.) that produce the animation effect.
options	Optional. Additional options for the specified animation. Possible values: speed-set the velocity of the animation easing-Specify the easing function to use Callback-Specifies the function to execute after the animation is complete Step-Specifies the function to execute 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 begins immediately specialeasing-the mapping of one or more CSS properties from   styles   parameters, and their corresponding easing functions