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() function reference

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

2 个答案: