Image Edging Shows During Transitions

[<M/>]

I have a slider and for some odd reason after all the images slide across (they slide perfectly at first) they begin to show a little bit of the previous image (this is the second rotation)...

So how do I get it to stop doing that?
Can someone help me with this flaw... I may have to rephrase this, but that's what bugs me...

Here is my jQuery code:

$(window).load(function() {
              var slideContainer = $('#slider_container'), slidesHolder = $(slideContainer).children(), slideWidth = slideContainer.width(), slidePos = 0, slides = $(slidesHolder).children(), slideTotal = slides.length, currentSlide = 0, delay = 3000, slideTime = 700;
              $(slideContainer).css({
                'overflow':'hidden',
                'position': 'relative'
              });
              $(slidesHolder).css({
                'position': 'absolute'
              });
              for (var i = 0; i < slides.length; i++) {
                $(slides[i]).css({
                  'position': 'absolute',
                  'top': '0',
                  'left': slidePos + 'px'
                });
                slidePos = slidePos + slideWidth;
              }
              $(slidesHolder).css('width', slidePos + slideWidth);
              $(slides).first().clone().css({
                'left': slidePos  + 'px'
              }).appendTo(slidesHolder);
              function animate() {
                $(slidesHolder).delay(delay).animate({
                  left: '-=' + slideWidth
                }, slideTime, function() {
                  if (currentSlide < slideTotal - 1) {
                    currentSlide++;
                    animate();
                  } else {
                    $(slidesHolder).css({
                      'left': 0
                    });
                    currentSlide = 0;
                    animate();
                  }
                });
              }
              animate();
            });