Let's take a look at the official introduction to this method.
Official Address http://api.jquery.com/animate/
-
- . Animate (properties, [duration,] [easing,] [complete])Version added: 1.0
PropertiesA map of CSS properties that the animation will move toward.
DurationA string or number determining how long the animation will run.
EasingA string indicating which easing function to use for the transition.
CompleteA function to call once the animation is complete.
- . Animate (properties, options) Version added: 1.0
PropertiesA map of CSS properties that the animation will move toward.
OptionsA map of additional options to pass to the method. Supported keys:
Duration
: A string or number determining how long the animation will run. (default value: "normal") a string ("slow", "normal", or "fast") with one of the three predefined speeds, or a millisecond value indicating the animation duration (for example, 1000)
Easing
: A string indicating which easing function to use for the transition. (default value: "Swing") Name of the erased effect to be used (required by the plug-in ). by default, jquery provides "linear" and "Swing ".
Complete
: A function to call once the animation is complete. Function executed when the animation is completed
Step
: A function to be called after each step of the animation. Function executed in each step of the animation
Queue
: A boolean indicating whether to place the animation in the effects queue. IfFalse
, The animation will begin immediately. (default value: True) if it is set to false, this animation will not enter the animation Queue (added in jquery 1.2)
Specialeasing
: A map of one or more of the CSS Properties
Defined by the properties argument and their corresponding easing
Functions (added 1.4). FromStylesIng of one or more CSS attributes of parameters and their corresponding easing Functions
Example
<! Doctype html >
< Html >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8" />
< Title > Untitled document </ Title >
< Style >
Div { Margin : 3px ; Width : 40px ; Height : 40px ; Background-color : # FCC ; Display : None ; Text-align : Right ; }
</ Style >
< Script SRC = "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" > </ Script >
</ Head >
< Body >
< Div ID = "T1" > Hey </ Div >
< Script >
Function Runit (){
$ ( " # T1 " ). Animate ({width: ' 80% ' }, "3000 ", " Swing " , Function () {$ ( " # T1 " Pai.html ($ ( " # T1 " ). Width ());});
$ ( ' # T1 ' ). Animate ({width: ' 50% ' , Opacity :. 5 }, {Duration: ' 3000 ' , Easing: " Swing " ,
Step: Function (Now, FX ){
VaR Data = FX. ELEM. ID + ' --- ' + FX. Prop + ' : ' + Now;
$ ( ' # T1 ' Pai.html (data );
},
Complete: Function (){
$ ( ' # T1 ' ). Append ( ' -- | -- Complete -- | -- ' );
}
});
}
Runit ();
</ Script >
</ Body >
</ Html >