title: Troubles with creating jQuery animation sequence
body: <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>