title: ExtJs Animation - Show/Fade elements ad infinitum
body: <p>I'm trying to create a never-ending looping animation using ExtJs, but am hitting the obvious barrier - calling a function recursively that potentially never ends tends to fill the stack pretty quickly. My (non-functioning) code is below; this function gets passed an array of strings which correspond to the divs to be shown and hidden. Without the callback, the code produces the desired show/fade effect, but obviously only the once. </p>
  
  <pre><code>// 'divArray' - a string array containing the IDs of the divs to cycle.
  function cycleDivs (divArray) {
      var len, i, el;
  
      // Sanity check.
      if (divArray === null || !Ext.isArray(divArray) || divArray.length === 0) {
          return;
      }
  
      // Get the length of the array; we'll need this to loop the animation.
      len = divArray.length;
  
      for (i = 0; i &lt; len; i++) {
          // Get the element.
          el = Ext.fly(divArray[i]);
          // Sanity check.
          if (el) {
              el.sequenceFx();
              el.fadeIn({
                  endOpacity: 1,
                  easing: 'easeOut',
                  duration: 3
              });
              el.pause(2)
              el.fadeOut({
                  endOpacity: 0,
                  easing: 'easeOut',
                  duration: 3
              });
  
              if (i === len - 1) {
                  // Recursive call if this is the last element in the array.
                  el.callback = cycleDivs(divArray);
              }
          }
      }
  }
  </code></pre>
  
  <p>Caveat: I've achieved this sort of effect before with jQuery and its wide variety of plugins, but as it's a work project I can only use the library I've got, which is ExtJs.</p>
  
  <p>Thanks in advance for any pointers.</p>