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:
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
|