How to use animate to customize animations in jquery

Animate Animate ()

01.animate () method of the Simple to use

Some of the more complex animations are not able to be implemented by some of the previously learned animation functions, and this is the powerful animate method.

Manipulate an element to perform a 3-second fade-in animation, contrasting the difference between the 2 set of animation settings.

$ (elem). FadeOut  $ (elem). Animate ({       opacity:0},3000 )

It is obvious that the animate method is more flexible and can precisely control style properties to perform animations.

Grammar:

1 . Animate (properties [, duration] [, easing] [, complete]) 2 . Animate (Properties, Options)

The. Animate () method allows us to create animations on the CSS properties of any numeric value. 2 grammars are used, almost almost, and the only necessary property is a set of CSS property key-value pairs. This set of properties is similar to the property key-value pair used to set the. css () method, except that the attribute scope makes more restrictions. The second argument can start by passing multiple arguments individually or it can be combined into one object for passing.

Parametric decomposition:

Properties: An object that consists of key-value pairs of one or more CSS properties. It is important to note that all properties used for animation must be numeric , unless otherwise noted, and those properties that are not numeric will not be able to use the basic jquery functionality. such as common, border, margin, padding, width, height, font, left, top, right, bottom, wordspacing, and so on, these are can produce animation effect. Background-color is obviously not possible, because the parameters are red or gbg such values, very use plug-ins, otherwise it is normally not only animated effect. Note that CSS styles are set using DOM names (such as "fontSize") rather than CSS names (such as "font-size").

Pay special attention to units, attribute values in units of pixels (px), unless otherwise noted. Units em and% need to be specified using

1 . Animate ({2     3     '50px'    4     ' Show ' ,   5     " 10em " , 6 );

In addition to defining values, each property can use ' show ', ' Hide ', and ' toggle '. These shortcuts allow custom hiding and display animations to control the display or hiding of elements

. Animate ({    "toggle"});

If you provide a value starting with + = or-=, the target value is calculated with the current value of the attribute plus or minus the given number.

. Animate ({     '+50px'"slow" );

Duration: Time

The time, in milliseconds, that the animation executes, and the larger the value, the slower the animation is performing, the faster it is. You can also provide a 'fast'slow' string that represents a duration of 200 and 600 milliseconds, respectively.

Easing animation motion algorithm:

Call Swing when it is the default in the jquery library. Animate at a constant speed, if other animation algorithms are needed, find the relevant plugin

Complete callback

The function that is executed when the animation is completed, which guarantees that the current animation will trigger when it is determined to complete.

02.animate () method to perform multiple animations in sequence

　Animate in the execution of animation, if you need to observe some of the animation performance, or some other time in the animation to do some other processing, we can use animate to provide a second set of syntax, passing an object parameter, you can get animation execution status some notifications.

. Animate (Properties, Options)

Options parameters

Duration-- Specifies the easing function to be used, which easing function is used for the transition step: Specifies the function to be executed after each step of each animation is completed progress: This callback is executed every time the animation is called. is a concept of progress complete: Animation completion callback

If more than one element is animated, the callback executes once on each matched element, not once as an entire animation

List the common ways

1$('#elem'). Animate ({2Width'Toggle',  3Height'Toggle'4   }, {5Duration the,6 specialeasing: {7Width'Linear',8Height'easeoutbounce'9     },Ten complete:function () { One$( This). After ('<div>animation complete.</div>'); A     } -});

animate()the calling method can create a custom animation effect, which is called in the following format:

$ (selector). Animate ({params},speed,[callback])

Where the params parameter is the animated CSS property name and value, the speed parameter is the velocity of the animation effect, in milliseconds, the optional callback parameter is the name of the callback function that is executed when the animation is completed.

For example, call animate() a method to display a picture by a small to large animation effect, as shown in:

1<body>23"Images/1.png"alt=""/>4<div id="Tip"></div>5<script type="Text/javascript">6 $ (function () {7$('img'). Animate ({8Width'100px';9Height'100px'Ten}, the, function () { One$("#tip"). HTML ('execution Done! '); A             }); -         }) -</script> the</body>

Effects displayed in the browser:

As you can see, the animate() method is called to display the picture element with an animated effect that gradually enlarges, and when the animation is done, the callback function shows "execution done!" in the <div> element of the page. The words.

　　03.stop () Stop animation

Animations are allowed to be paused during execution, when an element is called. The Stop () method, and the currently running animation (if any) stops immediately.

Grammar:

. Stop ([Clearqueue] [, Jumptoend]). Stop ([queue] [, Clearqueue] [, Jumptoend])

Stop has a few optional parameters that can be simply said to be in these 3 cases

　　1 . Stop (); To stop the current animation, click Continue to start at the point of pause.

　　2 . Stop (true); If the same element calls multiple animation methods, the animation that has not yet been executed is placed in the effect queue of the element. These animations do not start until the first one is finished. When you call. Stop (), the next animation in the queue starts immediately. If the Clearqueue parameter provides a true value, the rest of the animation in the queue is deleted and will never run.

　　3 . Stop (true,true); The current animation stops, but the CSS properties on the element are immediately modified to the target value of the animation.

Simply put: Refer to the following code:

1$("#aaron"). Animate ({2Height -3}, the)4$("#aaron"). Animate ({5Width -6}, the)7$("#aaron"). Animate ({8Opacity0.69}, -)

1. Stop (): Only the first animation is stopped, and the second third continues.
2. Stop (TRUE): Stops the first, second, and third animations.
3. Stop (true ture): Stops the animation and jumps directly to the final state of the first animation.

If the animation does not finish stopping, then the callback function executed when the animation is completed is not called.

How to use animate to customize animations in jquery