Animate div position in jQuery

Question

I'm learning to use jQuery, I'm not an expert programmer. I'm using animate effect to build a horizontal navigation for the loop of WP installation (no scrolls). I animate 960px in x axis the loop with a “Next Page” button and go to start going (to 0px x position) with a “start” button. The container of this has an overflow:hidden CSS property in order to hide the posts outside the container.

Please see a live example .

I don't know how to stop the slide effect when reaching the end of the loop div. Maybe with a conditional statement, but I don't know to approach this.

This is the script:

<script type="text/javascript">
$(document).ready(function(){
$(".left-slide").click(function(){
  $("#slide-container").animate({
    left:"-=960"
  }, 1500 );
});
$(".right-slide").click(function(){
  $("#slide-container").animate({
    left:"0"
  }, 1500 );
});
});
</script>

Answer 1

Would something like this work?

if($("#slide-container").css('left') > -($("#slide-container").width()))
{
}