Universal Animation Queue in jQuery?

Question

I'm trying to create this sliding effect but the only problem I'm having is queuing.

$(this).animate({'left' : '0%'}, randTime, function() {
    $(this).animate({'boxShadow' : 'none'});
    setTimeout(function() {
        $container.children('.slice').addClass('noshadow');
        $('body > div:not(#'+container+') .slice').each(function() {
            restartAnimation($(this));
        });             
    $container.children('.content').fadeIn();   
    }, (aLength+100));
});

The container variable above is the current container. I did :not(container) so the current container would continue animating. This is all in a function that has two attributes, the ID of the container element and the way the animation is going to run (just keywords run through if statements). Then I will have a menu which activates the animations like this:

if($(this).attr('name') == 'home') {

    animation('home', 'top');

}
else if { .....

The restart animation function simply restarts all other animating elements to their original positions so they can be run again. Now, the problem is, there is delay until the restart function runs, so if you click two menu items within the delay time you end up with the restart function running and then everything gets quite confused.

I need a way to restart the animation back to its original position so it's ready to run again, but not interfere and restart other animating elements. Otherwise we end up with a huge mess. I've set up a quick jsFiddle so you can try out the effect. The code is a little messy at the moment, I was planning on tidying everything up once I finished, but this queuing problem has really got me stuck. http://jsfiddle.net/qe7dj/

Is boxShadow animatable? Or did you want to use .css()? – Bergi Jul 10 '12 at 19:05 — Bergi, Jul 10 '12 at 19:05

score 2 · Accepted Answer · edited May 23 '17 at 12:12

One way to deal with this would be to not allow another animation to start until the first animation is finished.

There are probably a few ways to do this, but the one that comes to mind is to create a global function queue object (I'll give an explanation and code below).

You'll need a global variable to keep track of how many slides are currently animating.

var animationsRunning = 0;

Every time a slide animation starts, increment the above variable. When a slide animation ends, decrement it.

Now, before starting a whole new animation (of multiple slides), check that variable. If slides are currently animating, add the animation function to the global function queue. If not, go ahead and run the animation like normal.

if ($(this).attr('name') == 'home') {
    if (animationsRunning < 1) {
        animation('home', 'top');
    }
    else {
        funqueue.push(wrapFunction(animation, this, ['home', 'top']));
    }
}
else if ($(this).attr('name') == 'about') {
    if (animationsRunning < 1) {
        animation('about', 'left');
    }
    else {
        funqueue.push(wrapFunction(animation, this, ['about', 'left']));
    }
}

else if ($(this).attr('name') == 'services') {
    if (animationsRunning < 1) {
        animation('services', 'hslide');
    }
    else {
        funqueue.push(wrapFunction(animation, this, ['services', 'hslide']));
    }
}

Every time all slides finish animating, check if there are any items in the global function queue. If there are, execute the first one.

if (animationsRunning < 1 && funqueue.length > 0) {
    (funqueue.shift())();
}

The code pertaining to the function queue is shown below:

// Function wrapping code.
// fn - reference to function.
// context - what you want "this" to be.
// params - array of parameters to pass to function.
var wrapFunction = function(fn, context, params) {
    return function() {
        fn.apply(context, params);
    };
};

// Global function queue
var funqueue = [];

The Stack Overflow question here has a very good explanation of the global function queue concept, so I won't explain that in detail here.

A working jsfiddle example can be found here.

EDIT:

You may want to prevent a build up of waiting animations - if this is the case you can simply clear the function queue before adding the latest item. Obviously you don't actually need a queue in this case, but I've left it like that to be compatible with the first solution.

An updated jsFiddle is located here.

This works perfectly! I tried the animation stop thing but I had no idea about how to work queues or anything. Thanks so much. — Johnny, Jul 10 '12 at 23:29

Universal Animation Queue in jQuery?

1 Answers1