title: Jquery fadeOut/fadeIn callback not working
body: <p>i m building a little script to animate a list. Here is my html structure:</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li class="slider"&gt; Item-1 &lt;/li&gt;
     &lt;li class="slider"&gt; Item-2 &lt;/li&gt;
     &lt;li class="slider"&gt; Item-3 &lt;/li&gt;
     ...
     &lt;li class="slider"&gt; Item-13 &lt;/li&gt;
     &lt;li class="slider"&gt; Item-14 &lt;/li&gt;
     &lt;li class="slider"&gt; Item-15 &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;button&gt; Next &lt;/button&gt;
  </code></pre>
  
  <p>I'm displaying only four li at one time, the "next" button fadeOut the displayed four li et fadeIn the next four ones. But the fades are applying both together. I've tried to use callback function on the first fade but i can't make it work.</p>
  
  <p>here is the script:</p>
  
  <pre><code>$('li:gt(3)').css('display', 'none');
  
  //Define the interval of li to display
  var start = 0;
  var end = 4;
  
  //Get the ul length
  var listlength = $("li").length;
  
  $("button").click(function() { 
  
    // FadeOut the four displayed li 
    $('ul li').slice(start,end).fadeOut(500, function(){
  
          // Define the next interval of four li to show
          start = start+4;
          end = end+4;
  
          // Test to detect the end of list and reset next interval
          if( start &gt; listlength ){
            start = 0;
            end = 4;
          }
  
          //Display the new interval
          $('ul li').slice(start,end).fadeIn(500);
    });    
  });
  </code></pre>
  
  <p>Any clues?</p>