Universal Animation Queue in jQuery?
<p>I'm trying to create this sliding effect but the only problem I'm having is queuing. </p>

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

<p>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:</p>

<pre><code>if($(this).attr('name') == 'home') {

    animation('home', 'top');

}
else if { .....
</code></pre>

<p>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. </p>

<p>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. <a href="http://jsfiddle.net/qe7dj/" rel="nofollow">http://jsfiddle.net/qe7dj/</a></p>
