title: Slide Text In and Out
body: <p>I am having issues with a slide in Text slider:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="textSlider"&gt;
      &lt;ul&gt;
           &lt;li class="active"&gt;Doors | Windows | Showers&lt;/li&gt;
           &lt;li&gt;Superb Fenestration | Superior Service&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#textSlider ul li').each(function(){
      setTimeout(function(){
          $('.active').animate({'left': '0px'},500).delay(500).animate({'left': '-300px'},500);
          $(this).removeClass('active');
      }, 2000);
  
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#textSlider{
      position: relative;
      left: 0;
  }
  ul{
      list-style: none;
  }
  ul li{
      position: relative;
      left: -300px;
  }
  .clear{
      clear: both;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/sCsJV/39/" rel="nofollow">FIDDLE</a></p>
  
  <p>What I need:</p>
  
  <p>I want the first line to slide in, then out.
  After the first line, the second one should do the same. </p>
  
  <p>Then the function should repeat the whole process</p>
  
  <p>How do I do that?</p>