Introduction to the use of jquery animated animate methods

The function used to create the custom animation.
return value: JQuery animate (params, [duration], [easing], [callback])

If you are using a string value such as "Hide," "Show," or "toggle," the default animated form is called for the property. Paramsoptions a group of packages

Contains a collection of style attributes and their values as animated and final values

Params object {}, note: All specified properties must be in camel form, for example with MarginLeft instead of margin-left, if you are using "hide",

A string value such as "show" or "toggle", the default animated form is called for the property.

Duration (optional) A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)

Easing (optional) the name of the erase effect to use for string (requires plug-in support). Default jquery provides "linear" and "swing"

Callback (optional) function to execute when the animation is complete

0. Stop the animation

if ($ ('. Swaplist,.mainlist '). Is (': Animated ')) {    $ ('. Swaplist,.mainlist '). Stop (true,true);}

Animate instances:
1. Several different attributes of the DIV element change after clicking the button

$ ("#go"). Click (function () {    $ ("#block"). Animate ({        width: "90%",        Height: "100%",        fontSize: "10em",        borderwidth:10    }, 1000);});

2. Let the specified element move around

$ ("#right"). Click (function () {    $ (". Block"). Animate ({left: ' +50px '}, "slow");}); $ ("#left"). Click (function () {    

3. Toggle the height and transparency of paragraphs within 600 milliseconds

$ ("P"). Animate ({    height: ' Toggle ', opacity: ' Toggle '}, "slow");

4. Use 500 milliseconds to move the paragraph to the left 50 and show it clearly (transparency is 1)

$ ("P"). Animate ({    left:50, opacity: ' Show '}, 500);

5. Toggle Show Hidden

$ (". Box h3"). Toggle (function () {     $ (this). Next (". Text"). Animate ({height: ' Toggle ', opacity: ' Toggle '}, "slow");         $ (this). AddClass ("arrow");         return false;     },function () {         $ (this). Next (". Text"). Animate ({height: ' Toggle ', opacity: ' Toggle '}, "slow");         $ (this). Removeclass ("arrow");         return false;