javascript - 循环动画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

试试这个

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