Home > Developer > Web Develop
The. Queue () Displays or operates a queue that matches the functions executed by the element.
So what's the difference between it and those common animate (), FadeIn (), FadeOut (), Slideup (), show (), hide () animation functions?
If you say,
$ (' #foo '). Slideup (). FadeIn ();When this statement executes, the element starts its slide animation immediately, but the fade-in transition is placed in the FX queue and is not called until the sliding transition is complete.
This means that the animation starts with a swipe and then fades into the transition.
So what's the difference between using the queue () method?
The. Queue () method allows us to manipulate this function queue directly. Calling the. Queue () method with a callback function is particularly useful; it allows us to place a new function at the end of the queue.
This feature is similar to the animation method providing a callback function, but does not need to set the callback function when the animation executes.
If the function to be executed is not only animated, but also document operations such as append (), CSS properties are manipulated.
To experiment with the simplest one.
< style >
div {width:40px; height:40px;
Background:green; }
. Newcolor{background:Blue; }</style><Body><Div> </Div><Script>$ (document.body). Click (function () { $("Div"). Show ("Slow"); $("Div"). Animate ({left:'+=200'}, -); $("Div"). addclass ("Newcolor"); });</Script></Body>
This animation according to the set, is to this div slowly appear, swipe to the right, and then perform the CSS property operation, change the background color is blue.
The result of this writing, however, is that the div has become blue before it appears.
Because a series of animation functions will be put into a queue, we call him ' FX ', not the animation function, will not enter this queue, it will be executed before the queue function.
and the queue () is to solve the problem.
Queue () can add non-animated functions to the queue.
<style>Div{margin:3px;width:40px;Height:40px;position:Absolute; Left:0px;Top:30px;background:Green;Display:None; }Div.newcolor{background:Blue; } </style> <Scripttype= "Text/javascript"src= "/jquery/jquery.js"></Script></Head><Body>Please click here ...<Div></Div><Script>$ (document.body). Click (function () { $("Div"). Show ("Slow"); $("Div"). Animate ({left:'+=200'}, -); $("Div"). Queue (function () { $( This). addclass ("Newcolor"); $( This). Dequeue (); }); $("Div"). Animate ({left:'-=200'}, -); $("Div"). Queue (function () { $( This). Removeclass ("Newcolor"); $( This). Dequeue (); }); $("Div"). Slideup (); });</Script></Body>
OK, this will achieve the effect we want.
Then look at the above sentence:
Calling the. Queue () method with a callback function is particularly useful; it allows us to place a new function at the end of the queue.
This feature is similar to the animation method providing a callback function, but does not need to set the callback function when the animation executes.
Syntax:. Queue (queuename,newqueue)
The function we are adding is actually a callback function about the queue. This callback function can be placed in the animation function as the callback function of the animation function.
For example, the queue function:
$ (' #foo '). Slideup (); $ (' #foo '). Queue (function() { alert (' Animation complete. ') ); $ (this). Dequeue ();});Equivalent to:
$ (' #foo '). Slideup (function() { alert (' Animation complete. ') );});Well, it's finally understood.
JQuery Queue control function:. Queue ()
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
