循环动画 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() 函数的属性可以是相对的。

If a value is supplied with a leading += or -= sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.

在这里您可以找到 jQuery animate() function reference

循环动画 javascript，SetInterval 只工作一次

loop animate javascript, SetInterval works only once

html

javascript

jquery

jquery-animate