Methods for using animate custom animations in jquery _jquery

Animated animate ()

　　Simple use of the 01.animate () method

Some of the complex animation through the previous learning of several animation functions is not able to achieve, this time is a powerful animate method.

Operates an element to perform a 3-second fade in animation, contrasting the next 2 sets of animation settings.

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

Obviously, the Animate method is more flexible and can be used to accurately 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 any number of CSS properties. 2 grammars are used, almost almost, and the only necessary attribute is a set of CSS property key value pairs. This set of properties is similar to the property key value pairs used to set the. css () method, except that there are more restrictions on the property scope. The second argument can be passed by passing multiple arguments individually or by merging them into one object.

Parameter decomposition:

Properties: A key-value pair of one or more CSS properties that constitutes an object. It is important to note that all properties used for animations must be numeric unless otherwise noted; These properties cannot use basic jquery functionality if they are not numeric. For example, border, margin, padding, width, height, font, left, top, right, bottom, wordspacing, and so on are all animation effects. Background-color is obviously not possible, because the parameter is red or GBG such a value, very use plug-ins, otherwise it is not normally can only animation effect. Note that CSS styles are set using DOM names (such as "fontsize"), not CSS names (such as "font-size").

Pay special attention to the unit, the unit pixel (px) of the property value, unless otherwise stated. Unit EM and% need to specify use

. Animate ({left
:, 
width: ' px ' 
opacity: ' Show ', 
fontsize: ' em ',
},);

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

. Animate ({
width: "Toggle"
});

If you provide a value that starts with + = or =, the target value is computed with the current value of the property plus or minus the given number.

. Animate ({left 
: ' +50px '
}, "slow");

Duration: Time

The duration of the animation, in milliseconds, and the greater the value indicates the slower the animation is performed, not faster. You can also provide a ' fast ' and ' slow ' string, representing a duration of 200 and 600 milliseconds, respectively.
Easing animation motion algorithm:

Call Swing when the jquery library is the default. At a constant speed to animate, if you need other animation algorithms, please find the relevant Plug-ins

Complete callback

The function that is executed when the animation completes, which ensures that the current animation is determined and the post triggers

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

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

. Animate (Properties, Options)

Options parameter

Duration-Set the time of animation execution
Easing-Specify the easing function to use, and what kind of easing function to use for the transition
Step: Specify the function to be executed after each stage of each animation completes
Progress: This callback is executed every time the animation is invoked, which is the concept of a progress
Complete: Animation Complete callback

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

List the usual ways

$ (' #elem '). Animate ({
width: ' Toggle ', 
height: ' Toggle '
}, {
duration:,
specialeasing: {
Width: ' linear ',
height: ' easeoutbounce '
},
complete:function () {
$ (this). After (' <div> Animation complete.</div> ');

Call the animate () method to 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 speed of the animation effect, in milliseconds, the option callback parameter is the name of the callback function that is executed when the animation completes.

For example, call the Animate () method to display a picture from a small to large animation effect, as shown in the following illustration:

<body>
 
 

Effects displayed in the browser:

You can see from the diagram that the animate () method is invoked to display the picture elements in a gradually magnified animation effect, and when the animation completes, the function is displayed in the <div> element of the page with the "Execute done!" The words.