Animation processing summary under jQuery

Queue ()/dequeue ()
These two methods are just as concealed as the XMLHttpRequest object of Ajax and are not known to anyone. These two methods are very useful in animation processing. We often write such code.

Copy codeThe Code is as follows:
$ ('# Test'). animate ({
"Width": "300px ",
"Height": "300px ",
"Opacity": "1"
});

In this way, the height, width, and opacity of the test div change at the same time. Sometimes we do not want to execute the test div synchronously. Instead, the shape change is separated from the transparency change and is first converted into a div of 300*300, then the transparency changes gradually. We need to write this

Copy codeThe Code is as follows:
$ ('# Test'). animate ({
"Width": "300px ",
"Height": "300px ",
}, Function (){
$ ('# Test'). animate ({"opacity": "1 "});
});

You can imagine what the code is like if there are ten animation flows. queue () and dequeue () can solve these problems. For all the process methods, see a queue, let the function be called in sequence. Let's take a look at the syntax first.


Queue ([queueName], newQueue)Operation queue Method

The first parameter is the queue name. If this parameter is left blank, fx is used by default.

The second parameter can be a Function Array that stores all the queue functions, or a return function that adds new functions to the queue.

Dequeue ([queueName])Execute the next function in the queue for matching elements

Each time this method is called, The next function in the queue is executed.

Copy codeThe Code is as follows:
Var q = [
Function (){
$ (This). animate ({
"Width": "200px ",
"Height": "200px"
}, Next)
},
Function (){
$ (This). animate ({
"Width": "400px ",
"Height": "400px"
}, Next );
}
];

Function next (){
$ ('# Test'). dequeue ('myqueue ');
}

$ ('# Test'). queue ('myqueue', q );
Next ();

The above code changes test div to 200*200 first, and then to 400*400. Each animation executes the return function and calls the next method in the queue, the two animations are executed in sequence. If you want to add another function during the execution period, you can do this.

Copy codeThe Code is as follows:
Var q = [
Function (){
$ (This). animate ({
"Width": "200px ",
"Height": "200px"
}, Next)
},
Function (){
$ (This). animate ({
"Width": "400px ",
"Height": "400px"
}, Next );
}
];

Function next (){
$ ('# Test'). dequeue ('myqueue ');
}

$ ('# Test'). queue ('myqueue', q );
Next ();
$ ('# Test'). queue ('myqueue', function (){
$ (This). slideUp (). dequeue ('myqueue ');
});

All in all, these two methods are used to facilitate animation execution in a predetermined order.

ClearQueue ()/stop ()

These two methods are mainly used to cancel the animation.

ClearQueue ([queueName]) clears functions in the queue

Stop ([queue] [, clearQueue] [, jumpToEnd]) is used to stop ongoing animations.

Queue: name of the animation queue in progress

ClearQueue: The default value is false. Whether to clear the queue itself

JumpToEnd: The default value is false. Whether to finish the animation immediately.

If you want to stop the animation, you can write it like this.

Copy codeThe Code is as follows: $ ('# test'). clearQueue ('myqueue ');

In this way, the animation will not be terminated, but after the current animation is executed, the next animation in the queue will not be called (the queue is cleared, and there is no next animation). If you want to stop the animation immediately, it can be written in this way.

Copy codeThe Code is as follows: $ ('# test'). stop ();

You must configure the stop () parameter if you want to stop the animation or finish the animation immediately.

SlideDown ()/slideUp ()/slideToggle ()

Slide effects are often used when being animated, especially menus. These three functions are simple: Element collapse/stretching/Automatic collapse and stretching, but their parameters are not just duration, we can also add some other controls. Let's take a look at the introduction in the API. The Sanger function parameters are similar. The slideUp example

SlideUp ([duration] [, easing] [, complete]) easing is a gradient method, which has never been changed manually. If duration is not written, the animation will be completed in about one second by default.

SlideUp (options)

Common configurations in options include:

Duration: animation time

Queue: I will understand this.

Step: execute each attribute change during the animation process

Complete: executed when the animation is completed

Start: run when the animation starts.

Always: When an animation is terminated or unexpected execution is not completed

These three functions modify the element height during execution. After sideUp () is executed, the height is restored and the diaplay is set to none.

FadeIn ()/fadeOut ()/fadeToggle ()/fadeTo ()

The usage of fadeIn ()/fadeOut ()/fadeToggle () is similar to that of the slide series. It is not described one by one, but the transparency of elements when these three functions are modified, fadeOut () after the function is executed, it restores the opacity of the element and sets the display attribute to none.

The fadeTo (duration, opacity [, easing] [, complete]) fadeTo () method is not that complicated, but the duration and opacity of fadeTO () are not negligible and must be written

Show ()/hide ()/toggle ()

The usage of these three functions is the same as that of the slide series, but the effect is somewhat different.

1. If the duration parameter is not written, the system will immediately execute the task without any animation.

2. This animation simultaneously modifies the height, width, and opacity attributes.

3. After hide () is executed, the height, width, and opacity attributes are restored, and the display is set to none.

Animate ()
Some Complex animations cannot be implemented by the above functions. At this time, it is time for the powerful animate to come in handy. The animate () can be used in two ways.

. Animate (properties [, duration] [, easing] [, complete])

Most of the attributes do not need to be explained. properties are json. The attribute values can be literal, function, "toggle", and simple expressions. If a function is used, the return value is assigned to the attribute, those familiar with jQuery must understand what "toggle" is, that is, to switch an attribute between the initial value and the minimum value. The toggle attributes include width, height, opacity, and other numeric values, A simple expression is + =,-=, and so on. For example, you can use "width": "+ = 10px ".

Copy codeThe Code is as follows:
$ ("# Block"). animate ({
Width: "70% ",
Opacity: 0.4,
MarginLeft: "0.6in ",
FontSize: "3em ",
BorderWidth: "+ = 10px"
},1500 );

If the callback function is passed in, the function is called after the animation is executed.

. Animate (properties, options)

This method is more flexible. properties is the same as the previous one. Commonly Used options include

Duration: animation time

Queue: function queue

Step: return function for each attribute adjustment

Complete: The function for returning the animation.

Start: called when the animation starts.

Always: When an animation is terminated or unexpected execution is not completed

If jQuery is easy to use, are you familiar with the above configurations?

Copy codeThe Code is as follows:
$ ("# Book"). animate ({
Width: "toggle ",
Height: "toggle"
},{
Duration: 5000,
SpecialEasing :{
Width: "linear ",
Height: "easeOutBounce"
},
Complete: function (){
$ (This). after ("<div> Animation complete. </div> ");
}
});

Hover ()
Strictly speaking, this is not an animation function. However, since hover of earlier versions of IE does not work on many elements, CSS cannot do many operations, therefore, JavaScript is often used to process haver events.

. Hover (handlerIn (eventObject), handlerOut (eventObject ))

The method is very simple, so that you can write mousein and mouseout together.