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:

Copy 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 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 :

Copy code The code is as follows:

» Animate Block1< ;/button>
» 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:
Switch the paragraph with 600 milliseconds Height and transparency
jQuery code:

Copy code The code is as follows:

$("p").animate({
height: 'toggle', opacity: 'toggle'
}, { duration: "slow" });

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

Copy 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 only works if a plugin is used to provide this "easein" function.
jQuery code:

Copy code The code is as follows:

$("p").animate({
opacity: 'show'
}, { duration: "slow", easing: "easein" });