javascript - 尝试通过循环悬停时留下的 jquery 动画来获得平滑的幻灯片效果

Question

我正在尝试使用鼠标悬停时循环中的 animate left 来制作水平幻灯片的动画，并在 mouseleave 上结束它。 Here是我到目前为止所拥有的 jsfiddle 示例。

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

下面还包含代码:

 <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>

Answer 1

我认为更好的方法是目标动画是最大左值，并且动画的速度基于您拥有的盒子的数量。另外，对动画使用“线性”缓动。
像这样:

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

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

http://jsfiddle.net/uF7mX/2/