Stop .animate() once the last item reached w/jQuery
<p>I have a div with overflow set to hidden. Two triggers allow to scroll items inside the layer with overflow.</p>

<p>I have an overflow div with items hidden. I can scroll the boxes inside the hidden area on click of UP/DOWN elements:</p>

<pre><code>$("#up").click(function(){
    $("#container").find(".box").animate({"top": "+=20px"}, "slow");
});
$("#down").click(function(){
    $("#container").find(".box").animate({"top": "-=20px"}, "slow");
});

&lt;style&gt;
#itemsList {
    height:60px;
}
.box {
    height:20px;
    position:relative;
}
&lt;/style&gt;

&lt;div id="container"&gt;                        
    &lt;div id="up" class="scroll"&gt;UP&lt;/div&gt;
    &lt;div id="itemsList"&gt;
        &lt;div id="item1" class="box"&gt;item 1&lt;/div&gt;
        &lt;div id="item2" class="box"&gt;qweqweqwe&lt;/div&gt;
        &lt;div id="item3" class="box"&gt;qqqqqqqq&lt;/div&gt;
        &lt;div id="item4" class="box"&gt;eeeeeee&lt;/div&gt;
        &lt;div id="item5" class="box"&gt;rrrrrrrr&lt;/div&gt;
        &lt;div id="item6" class="box"&gt;tttttt 11&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="down" class="scroll"&gt;DOWN&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I need to disable .animate() once the scroll reaches first or last elements. The code above works, but it does not stop .animate(). I've added some code to check for position of the scrollable elements (see jsfiddle link) but it seems like I messed something up. </p>

<p>Here's my <a href="http://jsfiddle.net/VP5Xb/8/" rel="nofollow">JSfiddle</a>.</p>
