Jquery queueing animations

Question

I have several animations that I want to perform on different objects in the dom.

I want them to occur in order.

I do not want to do it like this:

$('#first').show(800, function () 
{ $('#second').show(800, function () {...etc...});

I want to add all my animations(and cpu intensive functions) to some kind of queue object that will make sure they execute sequentially.

score 9 · Answer 1 · answered Mar 20 '09 at 21:42

9

I'm not sure why you don't want to use the method you described. If its purely from an organizational standpoint you don't have to use anonymous functions

function showFirst() {
  $('#first').show(800, showSecond);
}

function showSecond() {
  $('#second').show(800, showThird);
}

function showThird() {
  $('#third').show(800);
}

function startAnimation() {
  showFirst();
}

answered Mar 20 '09 at 21:42

bendewey

39,709
13
100
125

2

I don't truly need this queue, it would just make organizing code 1000x better. I don't understand why there is not wrapper for any function in a like $(func).joinUniversalQueue(); Wow....that is exactly what I want and it would be crazy easy to write such a method/plugin. I'll just do that. – thirsty93 Mar 20 '09 at 22:38
On second thought, $.joinUniversalQueue(func); would be much easier – thirsty93 Mar 20 '09 at 22:47

score 2 · Answer 2 · answered Mar 20 '09 at 21:47

2

Check out the documentation for jQuery Effects. The stuff about queuing should do what you need.

answered Mar 20 '09 at 21:47

rfunduk

30,053
5
59
54

score 2 · Answer 3 · answered Mar 21 '09 at 05:00

2

I've just used this plugin, http://plugins.jquery.com/project/timers, the other day to do a similar thing. Your basically iterating through all the matched dom elements and then performing an animation each one when the index * your millisecond count.

The code was something like this:

HTML:

<div id="wrapper">
   <div>These</div>
   <div>Show</div>
   <div>In</div>
   <div>Order</div>
</div>

jQuery

$("#wrapper div").foreach( function(i) {
    i = i + 1;
    $(this).oneTime(800 * i, "show", function()  {
        $(this).show();
    });
});

answered Mar 21 '09 at 05:00

John Farrell

24,673
10
77
110

do these timers stop execution until the animation finishes? – thirsty93 Mar 25 '09 at 02:18
Nope, I used them to chain animations together so that one started while another one finished. – John Farrell Mar 29 '09 at 05:54

Ben · Answer 4 · 2013-09-11T16:41:39.523

This would also work.

            $('#first').show(800);
            setTimeout("$('#second').show(800)", 800);
            setTimeout("$('#third').show(800)", 1600);
            setTimeout("$('#forth').show(800)", 2400);

I know its not purely sequential, but I find it makes it easy to read and allows you to set off animations with more flexability.

Note: That you have to quote the code you want executed. I haven't used any double quotes in the previous code but if you did you would have escape them as follows.

            $('#first').animate({"width":"100px"}, 500);
            setTimeout("$('#second').animate({\"width\":\"100px\"}, 500)", 800);
            setTimeout("$('#third').animate({\"width\":\"100px\"}, 500)", 1600);
            setTimeout("$('#forth').animate({\"width\":\"100px\"}, 500)", 2400);

You can usually avoid this by alternating which quotes you use, but though it was worth a mention.

UPDATE: Here is another option, and it's also worth checking out jquery promises here

            $('#first').show(800);
            $('#second').delay(800).show(800);
            $('#third').delay(1600).show(800);
            $('#forth').delay(2400).show(800);

Sometimes there is overhead, and the one completes before the other (unpredictably). Order can be important for some animations. Queueing makes sure the second animation starts when the first one is finished. — Ryan Taylor, Sep 06 '13 at 20:49
@Ryan Taylor Not quite sure how the timing could get off. It's true that the browser won't guarantee the exact millisecond due to cpu load etc, but it's my understanding that the execution order is guaranteed. I’ve updated this answer to include another option anyway. And bear in mind that the correct way to do this, is the way the that he doesn’t want to do it :), just giving alternatives. — Ben, Sep 11 '13 at 16:38
setTimeout is veeeeeeeeeeeeery unreliable to use for animation. it's an asynchronous function can make for hours of debugging headache for a beginner — user151496, Apr 11 '16 at 12:54

Jquery queueing animations

4 Answers4

Linked

Related