jQuery animation queues

Question

I am at a dead end, so hoping you jQuery gurus can help.

I have a total of 10 elements (actually small images) on a page. I need to animate them like this:

1. first 2 show up
2. then the next 2 show up
3. then the next 3 show up
4. then the next 1 shows up
5. then the last 2 show up

So, I have added attributes to each one (sequence_num = "1" (or 2 or 3 etc) so I can easily choose via the $() which ones to animate using the animate() function.)

My goal is to write a function that does the animation (I can do that - i think i have grasped the animate() function).

What I am getting stuck on is how to delay the animation so the proper groups of objects are animated in before the next group starts. I have tried the queue parameter of the animate() function, but that doesn't seem to work for what I am trying to do.

Does anyone have any experience with this?

Answer 1

In this case it might be easier to use the callback function you can supply to animate() instead of the build-in queuing. The callback is called when the animation ends, so when it's called, find the next elements and animate them and so on until you run out of elements.

Answer 2

$(function() {
        $('#start').click(function() {

            $('#first, #second').fadeIn(1000, function() {

                $('#third, #forth').fadeIn(500, function() {

                    $('#fifth, #sixth, #seventh').fadeIn(750, function() {

                        $('#eight').fadeIn(800, function() {

                            $('#ninth, #tenth').fadeIn('slow');

                        });
                    });
                });

            });

        });
    });

Answer 3

(function($){
$.fn.showdelay = function(){
    var delay = 0,

    return this.each(function(){
        $(this).delay(delay).fadeIn(1800);

        switch($(this).index()){
            case 2: delay += 2000; break;
            case 4: delay += 2000; break;
            case 7: delay += 2000; break;
            case 8: delay += 2000; break;
            //and so on
        }
    });
};
})(jQuery);

This is just an untested piece of code, demonstrating how you could avoid using jQuerys callback functionality. It should work, if not let me know.

usage: $("img").showdelay(); or $(".imageclass").showdelay();

Kind Regards

--Andy

Answer 4

Avoid a huge "christmas tree" of callbacks, or trying to time it just right with setTimeout.

var queue = [];

function show_next_in_queue() {
    if (queue.length > 0) {
        queue.shift().show(1000, show_next_in_queue);
    }
}

queue.push($("img.sequence1"));
queue.push($("img.sequence2"));
queue.push($("img.sequence3"));
queue.push($("img.sequence4"));
queue.push($("img.sequence5"));

show_next_in_queue();

This triggers one animation after another, and is easily extendable with no millisecond-calculations or code that disappears outside the right hand side of your editor screen.