Косяк в слайдере

  <style>
  .item {background: #3f3f3f; position: absolute; width: 323px; height: 300px; margin: 5px; text-align: center; color: #fff; display: none;}
  .nav{ text-align: center; }
  .left, .right {font-size: 30px; padding: 10px;}
  .item:nth-child(1),.item:nth-child(2),.item:nth-child(3) {display: block;  }
  .mov{display: block; }
 
  </style>
 
<div style="width: 100%; overflow: hidden;">
    <div style="width: 1000px; margin: 0 auto; position: relative; height: 310px;">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="nav"><a href="#" class="left"><</a><a href="#" class="right">></a></div>
</div
 
  <script>
  $(document).ready(function(){
    $(".item").each(function(i,elem) {
        if(i<3){
            $(this).css({'left': i*333+'px'});
        } else {
            $(this).css({'left': '2000px'});
        }
    });
 
    $(".left").click(function(){
        $(".item:eq(0)").animate({"left": "-=100%"}, "slow",function(){$(".item:eq(0)").remove()}).clone(true).insertAfter(".item:last").css({'left': '2000px'});
        $(".item:eq(1),.item:eq(2)").animate({"left": "-=333px"}, "slow");
        $(".item:eq(3)").addClass("mov").animate({left: 666},"slow",function(){$(".mov").removeClass("mov")});
        return false;
    });
 
  });
  </script>