By default the jQuery queue that is created for animate() is done per element, I'm wondering if there is a way to create a single queue for all animations done with animate()? I.e. only one animation should be occuring at a time
3 Answers
You could do it with your own custom queue on one element using queue:
$(function(){
$('#myQueue')
.queue('myQueue',function(next){
$('#t1').animate({left: 100},
{duration: 1000,
queue: false,
complete: next
})
})
.queue('myQueue',function(next){
$('#t2').animate({left: 100},
{duration:1000,
queue:false,
complete: next})
})
/* etc. */
.dequeue('myQueue')
})
7 Comments
Tobi
Closest to what I'm trying to acheive
Jeffery To
BTW You can remove the
queue: false in this case (revision 2 of this answer)
James Montagne
@Jeffery that depends. If you intend to have other animations going on outside of this queue then you want the
queue:falseJeffery To
"only one animation should be occuring at a time" - it doesn't sound like there are other animations happening to me
James Montagne
That's fine, I still like this way better as a general solution since the queue acts independently of other queues.
|
.animate() has a queue option that will only allow one effect per element:
queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.
Usage
$('div').animate({ height: 50, queue: false });
1 Comment
Tobi
Doesn't that remove the queue all together rather than create a single one for all elements?
Something like this:
$(someElement) // could also be a plain object, e.g. $({})
.queue('customQueue', function (next) {
first.animate({ ... }, function () {
// when the animation is complete, call next() for customQueue
next();
});
})
.queue('customQueue', function (next) {
second.animate({ ... }, function () {
// when the animation is complete, call next() for customQueue
next();
});
})
// add more animations, then
.dequeue('customQueue');
