jQuery animation queues

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 开发者_如何学JAVA3 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?

---

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.

---

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

                        });
                    });
                });

            });

        });
    });

---

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.