試圖通過在懸停時循環jquery動畫來獲得平滑的幻燈片效果

Question

我試圖在鼠標懸停的循環中使用動畫左邊的動畫制作水平幻燈片，並在mouseleave上結束它。 這是迄今為止我所擁有的一個例子。

循環正在運行，但動畫在迭代之間變慢。 我錯了什么？ 有沒有更好的方法來實現我的目標？

代碼還包括在下面：

 <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版本。