循環動畫javascript，SetInterval僅工作一次

Question

我正在使用JavaScript嘗試為div設置動畫。 由於某種原因，我的div不會每2秒循環一次向右移動400px ，它只會移動一次。

JavaScript：

<script>
    function animate(name,dist,time) {
        $(name).animate({left:dist},time);
    }
    $(function() {
        setInterval(animate('.box1',400,800),2000);
    });
</script>  

HTML：

<div class="box1"></div>

Answer 1

window.setInterval(function () {
    animate('.box1',400,800);
}, 2000);

Answer 2

嘗試這個

function animate(name,dist,time) {
    $(name).animate({left:dist},time);
}
$(function() {
    setInterval(
        function() {
            animate('.box1',"+=400",800)
        },
        2000
    );
});

您可以在這里進行測試： https : //jsfiddle.net/CliffBurton/k03cyup1/ （我僅將50px用於測試）

jQuery animate()函數的屬性可以是相對的。

如果為值提供了前導+=或-=字符序列，則通過從屬性的當前值中加上或減去給定的數字來計算目標值。

在這里您可以找到jQuery animate()函數參考