[jquery Knowledge]jquery Knowledge 11-Advanced animation

Preface

1. Custom animations
2. Queued Animation methods
3. Animation-related methods
4. Animation Global Properties

I. Custom animations
JQuery offers several simple and commonly used fixed animations that we use. But sometimes, these simple animations don't meet our more complex needs. This time, JQuery provides a. Animate () method to create our custom animations to meet more complex and varied requirements.

$ ('. Animate '). Click (function () { 
$ (' #box '). Animate ({
' width ': ' 300px ', 
' height ': ' 200px ',
 ' FontSize ': ' 50px ',
  ' opacity ': 0.5
});
 

1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8

Note: A CSS change is an animated effect, the above example, already has four CSS changes, has realized the multi-animation synchronous motion effect.

Must pass the parameter only one, is a key value to the CSS change style the object. There are also two optional parameters, the speed and the callback function, respectively.

$ ('. Animate '). Click (function () { 
$ (' #box '). Animate ({
' width ': ' 300px ',
' height ': ' 200px '}, 1000, function () {
alert (' The animation executes me! ');});

1 2 3 4 5 6 1 2 3 4 5 6

To the current position, we are all creating a fixed position that does not move the animation. If you want to animate motion-state displacement, you must use custom animations and combine the absolute positioning of the CSS.

$ ('. Animate '). Click (function () { 
$ (' #box '). Animate ({
' top ': ' 300px ',//must first set CSS absolute positioning
' left ': ' 200px '});
});

1 2 3 4 5 1 2 3 4 5

In custom animations, each start motion must be the initial position or initial state, and sometimes we want to animate it by the current position or state. JQuery provides the added and reduced functionality of custom animations.

$ ('. Animate '). Click (function () {
 $ (' #box '). Animate ({
' left ': ' +=100px ',
 });
});

1 2 3 4 5 6 1 2 3 4 5 6

There are two ways to customize the implementation of a queued animation: 1. Perform an animation in the callback function again; 2. Animate the queue by concatenating or order.

Animate the Queued animation
$ ('. Animate ') in sequential order. Click (function () {
 $ (' #box '). Animate ({' Left ': ' 100px '}), $ (' #box '). Animate ({ ' Top ': ' 100px '}); $ (' #box '). Animate ({' width ': ' 300px '});

1 2 3 4 5 1 2 3 4 5

Note: Synchronized animations are implemented if they are not the same element

The queued animation is implemented by concatenating
 $ ('. Animate '). Click (function () {
$ (' #box '). Animate ({' Left ': ' 100px '
}). Animate (
{' Top ': ' 100px '
}). Animate ({
' width ': ' 300px '
});

1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8

The queue animation is implemented by a callback function of
 $ ('. Animate '). Click (function () {
$ (' #box '). Animate ({
 ' left ': ' 100px '
}, 
function () { 
$ (' #box '). Animate ({
' top ': ' 100px '},
 function () {
$ (' #box '). Animate ({' Width ': ' 300px '});});
 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 1 2 3 4 5 6 7 8 9 10 11 12 13 14 two. Queued Animation methods

Before we can already implement the queue animation, if it is the same element, you can sequentially or concatenating call. If it is a different element, you can use a callback function. But sometimes there are too many animations in the queue, and the readability of the callback function is greatly reduced. To do this, JQuery provides a set of methods that are specifically used to queue animations.

Concatenating cannot be implemented in sequential queue $ (' #box '). Slideup (' slow '). Slidedown (' slow '). CSS (' background ', ' orange ');

1 1

Note: If you animate a method, the concatenating can be queued sequentially, and the. css () method is not an animation method and will precede the first incoming queue. Then, you can use the callback function of the animation method to solve.

Using the callback function, force the. css () method to queue to. Slidedown () after
$ (' #box '). Slideup (' slow '). Slidedown (' Slow ', function () {$ (this). CSS (' Background ', ' orange ');

1 2 3 1 2 3

But if this is the case, when the animation is numerous, the readability not only decreases, but the original animation method is not clear enough. So, our idea is that each operation is its own independent approach. Then JQuery provides a method similar to the callback function:. Queue ().

Use the. Queue () method to simulate the animation method followed by the animation method after $ (' #box '). Slideup (' slow '). Slidedown (' slow '). Queue (function () {
$ (this). CSS (' Background ', ' orange '); 

1 2 3 1 2 3

Now, we would like to continue to add a hidden animation after the. Queue () method, when it is found impossible to achieve. This is caused by the. Queue () attribute. There are two ways to solve this problem, the callback function of JQuery's. Queue () can pass a parameter, which is the next function, which is then called by the next () method at the end of the concatenating to execute the queued animation.

Use the next parameter to implement the continue call Queue animation $ (' #box '). Slideup (' slow '). Slidedown (' slow '). Queue (function (next) {
$ (this). CSS (' Background ', ' orange ');
Next (); }). Hide (' slow ');

1 2 3 1 2 3

Because the next function appears after the jQuery1.4 version, we used the. Dequeue () method in general. Functions that are executed in the next element queue.

Use the. Dequeue () method to perform the next function animation $ (' #box '). Slideup (' slow '). Slidedown (' slow '). Queue (function () {
$ (this). CSS (' Background ', ' orange ');
$ (this). Dequeue (); }). Hide (' slow ');

1 2 3 1 2 3

With sequential invocation, the use of the queued animation method is very clear, with each segment representing a queue, and the nesting of the callback functions disorganized.

Use sequential invocation of the queue, executed one by one, very clear $ (' #box '). Slideup (' slow ');
 $ (' #box '). Slidedown (' slow ');
  $ (' #box '). Queue (function () {
$ (this). CSS (' background ', ' orange ');
$ (this). Dequeue (); })
$ (' #box '). Hide (' slow ');

1 2 3 4 5 6 7 1 2 3 4 5 6 7

The. Queue () method also has the ability to get the length of the current animation queue. Of course, this usage is less in common Web development, and we don't discuss it in detail here.

Gets the length of the current queue, FX is the default queue parameter
function count () {
return $ ("#box"). Queue (' FX '). length;
Call
$ (' #box ') at an animation. Slidedown (' Slow ', function () {alert (count ());});