title: Fade in/out list of DOM elements one at a time
body: <p>I've got a web page with a large list of hidden li elements that I'd like to endlessly loop over and display on a small visible list of 5 li elements.  I'm currently using a recursive method that calls itself with the next li element after each update which works fine to fade in/out each visible li one at a time forever.  However once I try to change the html in the visible li to the html in the hidden li that I'm looping over all hell breaks loose.  All 5 visible li's get set to the first 5 hidden li's and fade in/out all at once.  Then there is a long pause, the page freezes for a bit and eventually all 5 visible li's will fade in/out again and still be set to the first 5 hidden li's.  It's like once I try to change the html all of a sudden the entire looping happens all at once and I can't perceive why that would be the case.</p>
  
  <pre><code>$(function () {
      fade($("#all-donors").first(), 1);           
  });
  
  function fade(elem, curItem) {
      var curElement = $("#donor" + curItem);
      //curElement.html(elem.html());  //This line breaks it
      curElement.fadeOut(1000).fadeIn(1000, function () {
          curItem++;
          if (curItem &gt; 5) {
              curItem = 1;
          }
  
          // If we're not on the last &lt;li&gt;
          if (elem.next().length &gt; 0) {
              // Call fade on the next &lt;li&gt;
              fade(elem.next(), curItem);
          }
          else {
              // Else go back to the start
              fade(elem.siblings(':first'), curItem);
          }
      });
  }
  </code></pre>