Geek asks and answers

Single queue for jQuery () animation elements

By default, the jQuery queue created for animate () is executed for each element, I wonder if there is a way to create a separate queue for all animations done with animate ()? That is, only one animation should occur at a time

+3
source share
3 answers

You can do this using your own custom queue for a single item using the queue:

http://jsfiddle.net/jRawX/2/

$(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')
})
+5
source

Something like that:

$(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');
+1
source

.animate() queue, :

queue: , , . false, .

$('div').animate({ height: 50, queue: false });
+1

More articles:


All Articles