Geek asks and answers

How to use queue in jQuery animation?

I want to increase / decrease the font and the element, then the next element of this class, etc., for a set of elements <div class="test"></div> <div class="test"></div> ..... I mean

step 1: enlarging the first element and returning to normal size
step 2: enlarging the second element and returning to normal size
....

My main code

$(document).ready(function() {
    $('.test').animate({
               left:50,
               fontSize: "2em"},
               "slow")
               .animate({
               left:-50,
               fontSize: "1em"},
               "slow");

This will affect all elements at once. How can I make a queue for making changes one by one. Having one enlarged item at a time.

+3
source share
5 answers

You can do it with

$('.test').each(function(idx){
    var duration = 1200; // duration for all animations (2 x slow)
    $(this)
         .delay(duration*idx)
         .animate({ left:50, fontSize: "2em" }, 'slow')
         .animate({ left:-50, fontSize: "1em" }, 'slow');
});

Demo at http://jsfiddle.net/gaby/rz5Es/

For more precise control and more freedom in the sequence, look at my answer on a similar question:
Not a nested sequence of animations in jQuery?

+2
source

, ...

function animateSequence(elements){
    var element = $(elements).first();
    var originalSize = $(element).css('font-size');

    elements = $(elements).not($(element));

    $(element).animate(
        { fontSize: "2em" },
        "slow",
        function(){
            $(this).animate(
                { fontSize: originalSize },
                "slow",
                function(){
                    if(elements.length > 0)
                        animateSequence(elements);
                }
            )
        }
    );
}

animateSequence($('.test'));

: http://jsfiddle.net/xS7X7/

+2

, - ,

$(document).ready(function() {
    (function mycallback(i) {
      var elems = $('.test');
      elems.eq(i).animate({
                   left:50,
                   fontSize: "2em"}, function () {
        mycallback(i + 1 < elems.length ? i + 1 : 0);
      });
    }(0));
});

DEMO

UPDATE:

, , ,

$(document).ready(function() {
    (function mycallback(i) {
      var elems = $('.test');
      elems.eq(i).animate({
                   left:50,
                   fontSize: "2em"}, function () {
        $(this).animate({
               left:-50,
               fontSize: "1em"},
               "slow");
        if (i + 1 < elems.length)
            mycallback(i+1);
      });
    }(0));
});

+1

animate , ,

function animate_sequential(elems, css, delay, index){
    if(index===undefined) index = 0;
    if(index >= elems.length) return;     
    $(elems[index]).animate(css, delay, function(){
        animate_sequential(elems, css, delay, index+1)
    })
}

animate_sequential($('div'), {'font-size':'30px'}, 500)
animate_sequential($('div'), {'font-size':'15px'}, 500)

http://jsfiddle.net/anuraguniyal/QJc9L/

jQuery, $('div').animate_sequential , jQuery aimate, , css, css .

+1

Much simpler, easy to read and scale with Frame.js :

$('.test').each(function(i){
    var element = $(this);
    var originalSize = element.css('font-size');

    Frame(function(next){
        element.animate({ fontSize: "2em" }, "slow", next);
    });
    Frame(function(next){
        element.animate({ fontSize: originalSize }, "slow", next);
    });
});
Frame(function(next){
    // add a callback after all the animations have finished
    next();
});
Frame.start();
0
source

More articles:


All Articles