Javascript 尝试通过在悬停状态下向左循环jquery动画来获得平滑的幻灯片效果

我正在尝试使用鼠标左键循环动画制作水平幻灯片，并在mouseleave上结束它。是迄今为止我所拥有的一个JSFIDLE示例

循环正在工作，但动画在迭代之间变慢。我做错了什么？有没有更好的方法来实现我的目标

代码还包括以下内容：

 <div id="holder">
        <ul class="box_holder">
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
            <li class="box"></li>
        </ul>
    </div>
    <div class="left"></div>
</div>

<script>
function scrollList(){
    $("ul").animate({
        "left" : "-=30px"
    }, 1000,scrollList);
}

$(".left").hover(function(){
    scrollList("left");
},
function(){
    $("ul").stop();
});
</script>

函数滚动列表（）{
$（“ul”）。动画({
“左”：“-=30px”
}，1000，滚动列表）；
}
$（“.left”）.hover（函数（）{
滚动列表（“左”）；
},
函数（）{
$（“ul”）.stop（）；
});

我认为更好的方法是将目标动画设置为最大左侧值，并根据您拥有的框数设置动画的速度。另外，对动画使用“线性”缓和。
类似以下内容：

function scrollList(){
    var boxes = $('.box').length;
    $("ul").animate({
        "left" : "-=" + 30*boxes
    }, 700 * boxes, "linear", scrollList);
}

$(".left").hover(function(){
    scrollList("left");
},
function(){
    $("ul").stop();
});

---

请看一看。松弛指定动画的计时方式。在这种情况下，默认设置不适合您的需要-我建议尝试

线性版本。
您的HTML无效，请检查打开/关闭标记。