Jquery 循环中出现无序的元素

我正在制作一个

div

，其中文本自动循环和移动。但是有一个小问题，元素甚至在循环完成之前就开始重复。我的意思是循环中断，元素开始出现无序

这里是链接

这是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);
        });
    }   
}

$（文档）.ready（函数（）{
$（'.carousel'）。每个（函数（）{
if（$（this.width（）<$（this.children（'ul'）.width（））{
$（this）.children（'carrow'）.each（function（）{
$（this.hide（）；
});
}
});
$（'.carousel'）.hover（函数（）{
$（this）.children（'.carrow'）.each（function（）{
$（this.addClass（'carrow-hover'）；
});
}，函数（）{
$（this）.children（'.carrow'）.each（function（）{
$（this.removeClass（'carrow-hover'）；
});
});
$（'.carrow'）.hover（function（）{myAnimate（this）}，function（）{
$（this.parent（）.children（'ul'）.stop（）；
});
});
函数myAnimate（即）{
var SD=500；
var$carousel=$（that.parent（）；
var$ul=$carousel.children（'ul'）；
var距离=标准差；
var时间=2500；
var率=距离/时间；
距离=数学绝对值（$ul.position（）.left）；
if（$（that）.hasClass（'left-arrow'））{
如果（距离==0）{
$ul.css（{左：-500}）；
$ul.prepend（$ul.children（'li:last children'））；
}否则{
时间=距离/速率；
}
$ul.stop（）.animate({
左：0
}，时间，'linear'，函数（）{myAnimate（that）}）；
}
else if（$（that）.hasClass（'right-arrow'））{
如果（距离！=0）{
距离=SD-距离；
时间=距离/速率；
}
$ul.stop（）.animate({
左：-500
}，时间，'线性'，函数（）{
$ul.append（$ul.children（'li:first children'））；
$ul.css（{左：0}）；
我的动画（那）；
});
}   
}

请看一看