Jquery $ (). animate (Params, option) Custom Animation Function

(This article is reproduced from: http://www.cnblogs.com/royis/articles/2109254.html)

 

Animate (Params, options): 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 form of camels. For example, marginleft must be used to replace margin-left. The value of each attribute indicates how many style attributes are ended when the animation ends. 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.

 

Parameters:

 

Params options: a set of style attributes and their values that are used as animation attributes and final values.

 

Options options: a set of values that contain animation options.

Option:

Duration string, number :( default value: "normal") one of the three predefined speed strings ("slow", "normal", or "fast ") or a millisecond value (for example, 1000) indicating the animation duration)

Easing string :( default value: "Swing") Name of the erased effect to be used (supported by plug-ins). By default, jquery provides "linear" and "Swing ".

Complete function: the function executed when the animation is completed.

Step callback

Set queue Boolean (default: True) to false to prevent this animation from entering the animation Queue (added in jquery 1.2)

　　

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

<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);});

Eg2: after the second button is pressed, It is a traditional chained animation. That is, after the previous animation is completed, the next animation starts.

 

Eg3: Switch the height and transparency of a paragraph in 600 milliseconds

Jquery code:

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

Eg4: Move the section to a position of 50 on left in 500 milliseconds and display it completely clear (transparency is 1)

Jquery code:

$("p").animate({left: 50, opacity: 'show' }, { duration: 500 });

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

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