Question

我正在尝试使用鼠标左侧的循环中的动画留下动画并在鼠标上结束它来设置水平幻灯片的动画。 Here是迄今为止我所拥有的一个例子。

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

代码也包含在下面：

 <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

查看docs for the animation function。缓动指定动画的定时方式。在这种情况下，默认设置不符合您的需求 - 我建议您尝试使用linear版本。

试图通过在悬停时循环jquery动画来获得平滑的幻灯片效果

2 个答案: