title: jQuery .animate() infinite loop pauses when another animate function is called on same div
body: <p>there is probably something obvious that im doing / not doing that would solve this but i just cant see the answer</p>
  
  <p>Im attempting to run an infinite loop in an animation and keep it running while i change that div's height in a separate animate function. the issue is while the height animation is running on the ladder, the ladder's inifite loop "pauses" (for lack of a better word) and then continues after the animation of the height finishes </p>
  
  <p>here's the main part of the problem, Ive taken out alot of the stuff around it for the purpose of this question</p>
  
  <pre><code>var ladderloop = function(){
                      $("#ladder").animate({
                          "background-position-y":$("#stage").height()    
                      },500, "linear", function(){
                          $(this).css({
                              "background-position-y":0
                          });
                          ladderloop();
                      });
                  }
                  ladderloop();
  
                  $("#plane").delay(1000).toggle("slide", {direction:"left"}, 2000, function(){
  
                      $("#logo").animate({
                          "top":$("#stage").height()
                      }, 2000, function(){
                      });
  
                      $("#ladder").animate({
                          "height":$("#stage").height(),
                          //"background-position-y":$("#stage").height()
                      }, 2000, "linear", function(){
                          $("#stage").stop();
                      });
  
                  });
  </code></pre>
  
  <p>thanks in advance,
  Finbar</p>