Jquery custom animation overview and examples_jquery

animate(params, options) Return value:jQuery
Overview
Function used to create custom animations.
The key to this function is to specify the animation form and result style attribute objects. Each property in this object represents a style property that can change (such as "height", "top", or "opacity"). Note: All specified attributes must be in camel form, such as marginLeft instead of margin-left.
The value of each attribute indicates the length of this style attribute when the animation ends. If it is a numeric value, the style property will gradient from the current value to the specified value. If a string value such as "hide", "show", or "toggle" is used, the default animation form is invoked for the property.
In jQuery 1.2, you can use em and % units. Additionally, in jQuery 1.2, you can make elements move relative to each other by specifying " =" or "-=" in front of the attribute value.

Parameters
paramsOptions
A set containing style attributes and their values ​​as animated properties and final values ​​
optionsOptions
A set containing animation options A collection of values.

Options
durationString,Number
(Default: "normal") A string of one of three predetermined speeds ("slow", "normal", or " fast") or a millisecond value indicating the animation duration (such as: 1000)
easingString
(default: "swing") The name of the erasure 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: true) Setting this to false will prevent this animation from entering the animation queue (jQuery New in 1.2)

Example
Description:
After the first button is pressed, an animation that is not in the queue is displayed. When the div expands to 90%, it also increases the font. Once the font is changed, the animation of the border starts.
HTML code:

Description :
After pressing the second button, it will be a traditional chain animation, that is, the next animation will not start until the previous animation is completed.
HTML code :

Description:
Switch the paragraph with 600 milliseconds Height and transparency
jQuery code:

Description:
Use 500 milliseconds to move the paragraph to left 50 and display it completely clearly (transparency is 1)
jQuery code:

Description:
An example of using the "easein" function to provide different animation styles. This parameter only works if a plugin is used to provide this "easein" function.
jQuery code: