jQuery animate through unordered list
<p>I have an unordered list, the ul itself has no set height, and the li's have no set height. I'm trying to only show 5 li's and cycle through them with up/down arrows. The issue I'm having is with the 'up' button. For this example, I have 6 items, and on the sixth click of 'up' it no longer hides the items but simply adds to them, defeating the purpose of the slider.</p>

<p>HTML</p>

<pre><code>&lt;div id="container"&gt;
            &lt;a href="#" id="up"&gt;Up&lt;/a&gt;
            &lt;a href="#" id="down"&gt;Down&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;span&gt;Gun 1&lt;/span&gt;Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi&lt;a href=""&gt;Learn More&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;Gun 2&lt;/span&gt;Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi&lt;a href=""&gt;Learn More&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;Gun 3&lt;/span&gt;Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi&lt;a href=""&gt;Learn More&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;Gun 4&lt;/span&gt;Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi&lt;a href=""&gt;Learn More&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;Gun 5&lt;/span&gt;Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi&lt;a href=""&gt;Learn More&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;Gun 6&lt;/span&gt;Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi&lt;a href=""&gt;Learn More&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
</code></pre>

<p>JS</p>

<pre><code>$('#container &gt; ul &gt; li:gt(4)').hide();
$('#up').click(function(e){
    var first = $('#container ul li:first');
    first.hide('fast',function(){
    $('#container ul').append(first.show(500));
    $('#container &gt; ul &gt; li:gt(4)').hide();
});
e.preventDefault();
});
$('#down').click(function(e){
    var last = $('#container ul li:last');
    last.hide('fast',function(){
    $('#container ul').prepend(last.show(500));
    $('#container &gt; ul &gt; li:gt(4)').hide();
});
e.preventDefault();
});
</code></pre>
