jquery .animate() in a loop using the index on complete:
<p>I am working on a script that runs multiple animations at once, and based on when a new animation starts, the rest of the elements currently animating have to .stop() and move to another loation (this is working). So I built an array of animations that gets .animate()'ed when a new animation is added, and when each animation completes I need to remove it from the array. Here is the code I tried using:</p>

<pre><code>for (var i = 0; i &lt; animations[key].length; i++) {
animations[key][i].object.animate({
    top: animations[key][i].endCoords.top,
    left: animations[key][i].endCoords.left
}, {
    duration: 800,
    complete: function() {
        console.log(i);
        animations[key].splice(i, 1);
        console.log(animations);
    }
});
}
</code></pre>

<p>The problem is when complete: runs, <code>i</code> is set to animations[key].length. I am pretty sure I  understand why it is doing that, because the for loop is continuing before the animation is finished (which is good because it does allow me to run multiple animations at once), but is there any way to write the code so that when complete: runs it has the right index to do the splice?</p>

<p>Thanks in advance!</p>
