Animate (params, options) return value: JQuery
Overview
A function to create a custom animation.
The key to this function is to specify the animation form and the result style Property object. Each property in this object represents a style attribute that can be changed (such as "height", "top", or "opacity"). Note: All specified attributes must be in camel form, such as marginleft instead of Margin-left.
The animation ends when the value of each property indicates how much of the style property is. If it is a numeric value, the Style property is graduated from the current value to the specified value. If you are using a string value such as hide, show, or toggle, the default animation form is invoked for the property.
In JQuery 1.2, you can use EM and% units. In addition, in JQuery 1.2, you can make the element relative motion by specifying "+ =" or "=" in front of the attribute value.
Parameters
Paramsoptions
A set of style attributes and their values that are included as animation properties and end values
Optionsoptions
A set of values that contain animation options.
Options
Durationstring,number
(Default: "Normal") a string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the length of an animation (for example, 1000)
Easingstring
(Default: "Swing") the name of the erase effect to use (requires plug-in support). The default jquery provides "linear" and "swing".
Completefunction
Functions that are executed when the animation completes
Stepcallback
Queueboolean
(default: TRUE) set to False to keep this animation from entering the animation queue (new in JQuery 1.2)
Sample
Describe:
When the first button is pressed, the animation that is not in the queue is displayed. When the div expands to 90%, the font is added, and once the font has been changed, the border animation begins.
HTML Code:
Copy Code code as follows:
<button id= "Go1" >»animate block1</button>
<button id= "Go2" >»animate block2</button>
<div id= "Block1" >block1</div><div id= "Block2" >block2</div>jquery Code:
$ ("#go1"). Click (function () {
$ ("#block1"). Animate ({width: "90%"}, {queue:false, duration:5000})
. Animate ({fontsize: ' 10em '}, 1000)
. Animate ({Borderwidth:5}, 1000);
});
$ ("#go2"). Click (function () {
$ ("#block2"). Animate ({width: "90%"}, 1000)
. Animate ({fontsize: ' 10em '}, 1000)
. Animate ({Borderwidth:5}, 1000);
});
Description:
The second button is followed by a traditional chain animation, that is, after the previous animation is completed, the next animation will begin.
HTML Code:
Copy Code code as follows:
<button id= "Go1" >»animate block1</button>
<button id= "Go2" >»animate block2</button>
<div id= "Block1" >block1</div><div id= "Block2" >block2</div>jquery Code:
$ ("#go1"). Click (function () {
$ ("#block1"). Animate ({width: "90%"}, {queue:false, duration:5000})
. Animate ({fontsize: ' 10em '}, 1000)
. Animate ({Borderwidth:5}, 1000);
});
$ ("#go2"). Click (function () {
$ ("#block2"). Animate ({width: "90%"}, 1000)
. Animate ({fontsize: ' 10em '}, 1000)
. Animate ({Borderwidth:5}, 1000);
});
Description:
Toggle paragraph height and transparency in 600 milliseconds
jQuery Code:
Copy Code code as follows:
$ ("P"). Animate ({
Height: ' Toggle ', opacity: ' Toggle '
}, {duration: "slow"});
Description:
Move the paragraph to the left 50 in 500 milliseconds and show it clearly (transparency is 1)
jQuery Code:
Copy Code code as follows:
$ ("P"). Animate ({
LEFT:50, opacity: ' Show '
}, {duration:500});
Description:
An example that uses the "Easein" function to provide different animation styles. This parameter only works if the plug-in is used to provide this "Easein" function.
jQuery Code:
Copy Code code as follows:
$ ("P"). Animate ({
opacity: ' Show '
}, {duration: "Slow", easing: "E Asein "});
