title: jQuery rotating through list items in a gallery
body: <p>This has probably been answered before and I already know how this should work, but for some reason it is not. I think it may be how I am looping through the elements.</p>
  
  <pre><code>$(document).ready(function() {
       var element = '#gallery ul#gallery-container';
   var idx=0;
   var timeout = 3000;
   var number =  $(element + ' li').length;
  
  function changeSlide() {
  
      $(element + ' li:eq(' + idx + ')').fadeOut();
  
      idx = idx + 1;
  
      if (idx == number) {
          idx=0;
      }
  
      $(element + ' li:eq(' + idx + ')').fadeIn().delay(timeout).delay(0,   function() {
          changeSlide();
      });;
  
  }
  
   $(element + ' li').hide();
  
   $(element + ' li:first').fadeIn().delay(timeout).delay(0, function() {
      changeSlide();
   });
  });
  </code></pre>
  
  <p>Then the list is like this:</p>
  
  <pre><code>&lt;div id="gallery"&gt;
      &lt;ul id="gallery-container"&gt;
          &lt;li&gt;&lt;img src="media/images/screen-shot-02.jpg" width="173" height="258" alt=" "&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="media/images/screen-shot-01.jpg" width="173" height="258" alt=" "&gt;&lt;/li&gt;
      &lt;/ul&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>I was trying to get it to loop through the elements one by one, after a delay so the list item calls the function and hides itself, then the counter is incremented and then the current index is shown.
  I suspect the culprit to be this as if I put an alert in the function it is called:</p>
  
  <pre><code> $(element + ' li:eq(' + idx + ')').fadeOut();
  </code></pre>