Queuing up animations for serial execution is an obvious use for function queues. But is there a real benefit? After all, the animation methods allow for completion callbacks, so why not just fire off the next animation in the callback of the previous animation?
Adding functions to a queue
Let’s review the code fragment of listing 8.7 (minus the console.log() invocations for clarity):
var $moonImage = $('img[alt="moon"]');
$moonImage.animate({left: '+=256'}, 2500);
$moonImage.animate({top: '+=256'}, 2500);
$moonImage.animate({left: '-=256'}, 2500);
$moonImage.animate({top: '-=256'}, 2500);Compare that to the equivalent code that would be necessary without function queuing, using the completion callbacks:
var $moonImage = $('img[alt="moon"]');
$moonImage.animate({left: '+=256'}, 2500, function(){
$moonImage.animate({top: '+=256'}, 2500, function(){
$moonImage.animate({left: '-=256'}, 2500, function(){
$moonImage.animate({top: '-=256'}, 2500);
});
});
});It’s not that the callback variant of the code is that much more complicated, but it’d be hard to argue that the original code isn’t a lot easier to read (and to write in the first place). And if the bodies of the callback functions were to get substantially more complicated…. Well, it’s easy to see how being able to queue up the animations makes the code a lot less complex.
Queues can be created on any element, and distinct queues can be created by using unique names for them (except for fx, which is reserved for the effects queue). The method to add a function to a queue is, unsurprisingly, queue(). It has three variants.
| Method syntax: queue | |
|---|---|
| queue([name]) queue([name], function) queue([name], queue) | |
| The first form returns any queue of the passed name already established on the first element in the set as an array of functions. The second form adds the passed function to the end of the named queue for all elements in the matched set. If such a named queue doesn’t exist on an element, it’s created. The last form replaces any existing queue on the matched elements with the passed queue. When the name parameter is omitted, the default queue, fx, is assumed. | |
| Parameters | |
| name | (String) The name of the queue to be fetched, added to, or replaced. If omitted, the default effects queue of fx is assumed. |
| function | (Function) The function to be added to the end of the queue. When invoked, the function context (this) will be set to the DOM element upon which the queue has been established. This function is passed only one argument named next. next is another function that, when called, automatically dequeues the next item and keeps the queue moving. |
| queue | (Array) An array of functions that replaces the existing functions in the named queue. |
| Returns | |
| An array of functions for the first form. The jQuery collection for the remaining forms. | |
The queue() method is most often used to add functions to the end of the named queue, but it can also be used to fetch any existing functions in a queue or to replace the list of functions in a queue. Note that the third form, in which an array of functions is passed to queue(), can’t be used to add multiple functions to the end of a queue because any existing queued functions are removed. In order to add functions to the queue, you’d fetch the array of functions that are already in the queue using the first form of the method, merge the new functions, and set the modified array back into the queue using the third form of queue().
“No example here?” you say. Using the queue() method, you can add new animations at the end of a queue, but did you think we haven’t discussed how you can execute them? Let’s discover how so that we can set up a demo for you.
Leave a Reply