"Namespaced" animation queues in jquery
<p>Some related questions I found from searching: </p>

<p><a href="http://stackoverflow.com/questions/10467419/how-does-the-fx-queue-in-jquery-auto-start">How does the &#39;fx&#39; queue in jquery auto start?</a></p>

<p><a href="http://stackoverflow.com/questions/1058158/can-somebody-explain-jquery-queue-to-me">Can somebody explain jQuery queue to me?</a></p>

<p>I've read through the documentation on animate() for jquery but I am having some difficulty figuring out a solution to my problem.</p>

<p>What I am looking to do is queue up a series of animations on multiple elements.  I want the animations to act in sequence, that is I want the current animation on an element to block animations on its own element, but not block animations on the other element.</p>

<p>Finally I want to be able to cancel the animations on one of the elements but allow the animations on the other(s) to continue.</p>

<p>I <em>think</em> that named jquery queues is what I want, however attempting that gave me animations that never started (I think this is due to the magic that is the 'fx' queue not being present on every other queue).</p>

<p>Thanks in advance!</p>

<p>EDIT:</p>

<p>Here's what I am kind-of looking for:</p>

<pre><code>function someAnimationWrapper(queueName, element, animation) {
    ///&lt;summary&gt;
    /// Places the animation specified into the queue of animations to be
    ///  run on that element.  The animation queue is a named queue so 
    ///  animations in the queue can be stopped at any time.
    ///&lt;/summary&gt;
    ///&lt;param name="queueName" type="String"&gt;
    /// The name to assign to the element's animation queue.
    ///&lt;/param&gt;
    ///&lt;param name="element" type="jQuery"&gt;
    /// jQuery object to perform the animations on.
    ///&lt;/param&gt;
    ///&lt;param name="animation" type="Object"&gt;
    /// Animation properties for the animation call.
    ///&lt;/param&gt;

    // TODO: If magic needs to be done here this is a placeholder
    element.animate(animation);
}

function magicallyStopMyQueue(queueName, clearQueue, jumpToEnd) { // May take element, whatever I need to get the job done
    ///&lt;summary&gt;Mirrors jQuery.prototype.stop(), but with the named queue.&lt;/summary&gt;
    ///&lt;param name="queueName" type="String"&gt;
    /// Animation queue to stop.
    ///&lt;/param&gt;
    ///&lt;param name="clearQueue" type="Boolean"&gt;
    /// See jQuery.prototype.stop()
    ///&lt;/param&gt;
    ///&lt;param name="jumpToEnd" type="Boolean"&gt;
    /// See jQuery.prototype.stop()
    ///&lt;/param&gt;

    // TODO: some magics here
}

var e1 = $('.myDiv1'),
    e2 = $('.myDiv2');

someAnimationWrapper('firstQueue', e1, { properties: { left: '-=16' }, duration: 100 });
someAnimationWrapper('firstQueue', e1, { properties: { left: '-=16' }, duration: 100 });
someAnimationWrapper('firstQueue', e1, { properties: { left: '-=16' }, duration: 100 });
someAnimationWrapper('secondQueue', e2, { properties: { left: '-=16' }, duration: 100 });
someAnimationWrapper('secondQueue', e2, { properties: { left: '-=16' }, duration: 100 });
someAnimationWrapper('secondQueue', e2, { properties: { left: '-=16' }, duration: 100 });

// Now I want to stop the first one
magicallyStopMyQueue('firstQueue', true, true);
</code></pre>
