javascript - Jquery Animate Infinite Loop: How to Avoid Stack limit -

i've got jquery zooms in , out non-stop banner image. when run this, stack limit error in browser. still runs, there way make load stack "just in time"? when looking @ stack loads zoomin() , zoomout() on , on again on initial load until hits limit, page loads slow because of it.

$(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();  }); 

update: answers. using done(zoomout/zoomin) worked.

.done() expects function reference - function pass executed promise object resolved. instead, you're calling functions (which return nothing, undefined, anyways). if this, functions continually call each other, acting infinite loop. use this:

$bannerimg.promise().done(zoomout); // , later: $bannerimg.promise().done(zoomin); 

demo: http://jsfiddle.net/g6uws/

(i had change numbers make usable)

reference:

• http://api.jquery.com/deferred.done/