元素在循环中出现故障

Question

我正在制作一个div文本循环播放并自动移动。然而，存在一个小问题，即使在循环完成之前元素也会重复开始。我的意思是循环中断和元素开始出现故障。

以下是链接https://jsfiddle.net/adeete/yangtLu4/

这是jquery代码

$(document).ready(function(){
    $('.carousel').each(function(){
        if($(this).width() < $(this).children('ul').width()){
            $(this).children('carrow').each(function(){
                $(this).hide();
            });
        }
     });

    $('.carousel').hover(function(){
        $(this).children('.carrow').each(function(){
            $(this).addClass('carrow-hover');
        });
    }, function(){
        $(this).children('.carrow').each(function(){
            $(this).removeClass('carrow-hover');
        });
    });

    $('.carrow').hover(function(){myAnimate(this)}, function(){
        $(this).parent().children('ul').stop();
    });
});

function myAnimate(that){
    var SD = 500;   
    var $carousel = $(that).parent();
    var $ul = $carousel.children('ul');
    var distance = SD;
    var time = 2500;
    var rate = distance/time;

    distance = Math.abs($ul.position().left);

    if($(that).hasClass('left-arrow')){
        if(distance == 0) {
            $ul.css({left: -500});
            $ul.prepend($ul.children('li:last-child'));
        } else {
            time = distance/rate;
        }
        $ul.stop().animate({
            left: 0
        }, time, 'linear', function(){myAnimate(that)});
    }
    else if($(that).hasClass('right-arrow')){
        if(distance != 0){
            distance = SD - distance;
            time = distance/rate;
        }
        $ul.stop().animate({
            left: -500
        }, time, 'linear', function(){
            $ul.append($ul.children('li:first-child'));
            $ul.css({left: 0});
            myAnimate(that);
        });
    }   
}

请看一下。