Troubles with creating jQuery animation sequence
<p>I am trying to execute an animation sequence on progress bars:</p>

<pre><code>function animateProgress() {
    var params  = [{from: 50, to: 100}, {from: 0, to: 100}, {from: 0, to: 50}];
    animateProgressStep(params, 0);
}

function animateProgressStep(params, i) {
    $(".progress").width(params[i].from).animate({width: params[i].to}, {
        duration: 2000, 
        complete: function() {
            if(i + 1 &lt; params.length) {
                animateProgressStep(params, i + 1);
            } 
        }
    });
}
</code></pre>

<p>This works if there is a single bar on the page, but if there are many, it breaks on the second iteration because <code>complete</code> callback is called as many times as there are progress bar elements on the page. </p>

<p>What would be a solution? </p>

<p>Can play with it here: <a href="http://jsfiddle.net/TythE/1/" rel="nofollow">http://jsfiddle.net/TythE/1/</a></p>
