javascript - 试图通过在悬停时循环一个 jquery 动画来获得平滑的滑动效果

Question

我试图在鼠标悬停时使用动画左循环动画水平幻灯片并在鼠标离开时结束它。这是迄今为止我所拥有的一个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/

Answer 2

查看动画功能的文档。缓动指定你的动画是如何计时的。在这种情况下，默认设置不适合您的需求 - 我建议尝试该linear版本。