Animate (params, options) Return Value: jQuery
Overview
A function used to create a custom animation.
The key to this function is to specify the animation form and result style attribute object. Each attribute in this object represents a changeable style attribute (such as "height", "top", or "opacity "). Note: All specified attributes must be in the camel format. For example, margin-left must be replaced by marginLeft.
The value of each attribute indicates the animation ends when the style attribute is reached. If it is a value, the style property will gradually change from the current value to the specified value. If a string value such as "hide", "show", or "toggle" is used, the default animation format is called for this attribute.
In jQuery 1.2, you can use em and % units. In addition, in jQuery 1.2, you can specify "+ =" or "-=" before the attribute value to make the element do relative motion.
Parameters
ParamsOptions
A set of style attributes and their values that serve as animation attributes and final values.
OptionsOptions
A set of values that contain animation options.
Option
DurationString, Number
(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)
EasingString
(Default value: "swing") Name of the erased effect to be used (requires plug-in support). By default, jQuery provides "linear" and "swing ".
CompleteFunction
Function executed when the animation is completed
StepCallback
QueueBoolean
(Default value: true) setting to false will disable this animation from entering the animation Queue (added in jQuery 1.2)
Example
Description:
After the first button is pressed, the animation that is not in the queue is displayed. When the div is expanded to 90%, the font is also added. Once the font is changed, the border animation starts.
HTML code:
Copy codeThe Code is 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:
After the second button is pressed, It is a traditional chained animation. That is, after the previous animation is completed, the next animation starts.
HTML code:
Copy codeThe Code is 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:
Change the height and transparency of a paragraph in 600 milliseconds
JQuery code:
Copy codeThe Code is as follows:
$ ("P"). animate ({
Height: 'toggle ', opacity: 'toggle'
},{ Duration: "slow "});
Description:
Move the section to a left-side 50 area in 500 milliseconds and the section is completely clear (transparency is 1)
JQuery code:
Copy codeThe Code is as follows:
$ ("P"). animate ({
Left: 50, opacity: 'show'
},{ Duration: 500 });
Description:
An example of using the easein function to provide different animation styles. This parameter takes effect only when the plug-in is used to provide this "easein" function.
JQuery code:
Copy codeThe Code is as follows:
$ ("P"). animate ({
Opacity: 'show'
}, {Duration: "slow", easing: "easein "});