Summary of animation processing under jQuery

queue()/dequeue()
These two methods are as hidden as Ajax’s XMLHttpRequest object and are not known to ordinary people. These two methods are very useful when processing animations. We often write some code like this

Copy code The 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 don’t want to execute it synchronously, but separate the change of shape and the change of transparency. First it becomes a 300*300 div, and then the transparency gradually changes. , we need to write like this

Copy code The code is as follows:

$('#test').animate({
 "width": "300px",
 "height": "300px",
 }, function () {
 "$('#test').animate({ "opacity": "1 " });
 });

Students can imagine what the code would look like if there were ten animation processes. queue() and dequeue() can solve such problems. Create a queue for all process methods and let the functions be called in sequence. First Take a look at the syntax

queue( [queueName ], newQueue ) The operation wants to execute the queue method

The first parameter is the queue name. If not written, the default is fx

The second parameter can be a function array to store all queue functions, or it can be a callback function to add new functions to the queue

dequeue( [queueName ] ) Execute the next function in the queue for the matching element

Every time this method is called, the next function in the queue is executed

Copy code The code is as follows:

var q = [
                                                                                                                                          🎜>              $(this).animate({

“                                                                                🎜>
function next(){
$('#test').dequeue('myQueue');
}

         $('#test').queue('myQueue', q);

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

Copy code

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

总而言之这两个方法就是为了方便动画按照预定次序执行

clearQueue() /stop()

这两个方法主要是为了取消动画

clearQueue( [queueName ] ) 将队列中函数清空

stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 用于停止正在进行的动画

queue：正在进行的动画队列名称

clearQueue：默认值为false，是否将队列本身也清空

jumpToEnd：默认值为false，是否立即执行完动画

如果想停止刚才动画可以这么写

复制代码代码如下:

$('#test').clearQueue('myQueue');

这样写不会不会终止动画，只是当前动画执行完后，不会再调用队列中下一个动画（队列被清空了嘛，没有下一个了），如果想立即停止动画，可以这么写

复制代码代码如下:

$('#test').stop();

As for whether the stop animation is paused or executed immediately, you need to configure the parameters of stop()

slideDown()/ slideUp()/ slideToggle()

The slide effect is often used when making animations, especially menus. These three functions are very simple, that is, the element shrinks/stretches/automatically determines the shrinking and stretching, but its parameters are not only duration, we can also add For some other controls, take a look at the introduction in the API. The Sanger function parameters are similar. Here is an example of slideUp

slideUp( [duration ] [, easing ] [, complete ] ) easing is a gradient method. I have never changed this manually. If duration is not written, it will take about one second to complete the animation by default

slideUp(options)

Commonly used configurations in options include

duration: animation time

queue: You will understand this after reading the above

step: Executed every time the attribute changes during the animation

complete: Executed when the animation is completed

start: Executed when the animation starts

always: Occurs when the animation is terminated or unexpectedly fails to complete

These three functions will modify the height of the element when executed. After sideUp() is executed, the height will be restored and the dialog will be set to none

fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo()

The usage of fadeIn()/ fadeOut()/ fadeToggle() is similar to the slide series, no longer Explain one by one, only these three functions modify the transparency of the element. After the fadeOut() function is executed, it will restore the opacity of the element and set the display attribute to none

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

show()/ hide()/ toggle()

The usage of these three functions is the same as the slide series, but there are a few differences in effects

1. If the parameter duration is not written, it will be executed immediately without animation

2. This animation modifies the height, width, and opacity attributes at the same time

3. After the execution of hide() is completed, the height, width, and opacity attributes will be restored, and the display will be set to none

animate()
Some complex animations cannot be realized by relying on the above functions. This is when the powerful animate comes in handy. There are two ways to use animate()

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

Most attributes do not need explanation. Properties are json. The value of the attribute can be a literal, function, "toggle", or simple expression. If it is a function, the return value will be assigned to the attribute. Students who are familiar with jQuery will definitely understand." What is "toggle" is to switch an attribute between the initial value and the minimum value. The attributes that can use toggle include width, height, opacity, etc., including numeric value attributes. The simple expressions are =, -=, etc., for example, it can be like this "width":" =10px".

Copy code The code is as follows:

$( "#block" ).animate({
 width: "70%",
 opacity: 0.4,
 marginLeft: "0.6in",
 fontSize: "3em",
 borderWidth: " =10px"
 }, 1500 );

If a callback function is passed in, the function will be called after the animation is executed

.animate( properties, options )

This usage is more flexible, the properties are the same as the previous usage, and the commonly used options are

duration: animation time

queue: function queue

step: the rollback function for each attribute adjustment

complete: the callback function to complete the animation

start: Called when the animation starts

always: Occurs when the animation is terminated or unexpectedly fails to complete

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

Copy code The code is as follows:

$( "#book" ).animate({
 width: "toggle",
 height: "toggle"
 }, {
 duration: 5000,
 specialEasing: {
 width: "linear",
 height: " easeOutBounce"
 },
 complete: function() {
 $( this ).after( "Animation complete.
" );
 }
 } );

hover()
Strictly speaking, this is not an animation function, but because the hover of lower versions of IE does not work for many elements, many actions cannot be completed with CSS, so it is often used. JavaScript handles the haver event.

.hover( handlerIn(eventObject), handlerOut(eventObject) )

The method is very simple, I won’t introduce it in detail, so you can write mousein and mouseout together.