title: Jquery Animate Infinite Loop: How to Avoid Stack limit
body: <p>I've got some Jquery that simply zooms in and out non-stop for a banner image.  When I run this, I get a stack limit error in the browser.  It still runs, but is there a way to make it only load into the stack "just in time"?  When looking at the stack it loads <code>zoomIn()</code> and <code>zoomOut()</code> over and over again on the initial load until it hits the limit, page loads are really slow because of it.</p>
  
  <pre><code>$(document).ready(function(){
  
      $bannerImg = $('.post-picture img')
  
      function zoomIn(){
          $bannerImg.animate({
              width: 1500,
          }, 50000,'linear');
  
          $bannerImg.promise().done(zoomOut());
      }
  
      function zoomOut(){
          $bannerImg.animate({
              width: 1500,
          }, 50000,'linear');
  
          $bannerImg.promise().done(zoomIn());
      }
  
      zoomIn();
  
  });
  </code></pre>
  
  <p>Update: Thanks for the answers.  Using done(ZoomOut/ZoomIn) worked. </p>