The animation function is used to create a custom animation. The key of this function is to specify the animation form and result style attribute object. Next we will introduce how to use it, if you are interested, you can refer to "Ha animate (params, options)" returned 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. The font is also added when p is expanded to 90%. After the font is changed, the border animation starts.
HTML code:
The Code is as follows:
» Animate Block1
» Animate Block2
Block1
Block2
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:
The Code is as follows:
» Animate Block1
» Animate Block2
Block1
Block2
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:
The 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:
The 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:
The Code is as follows:
$ ("P"). animate ({
Opacity: 'show'
}, {Duration: "slow", easing: "easein "});
