Question

我正在尝试使用.animate（）动画变量，而变量动画正确，排队的默认参数似乎没有效果，这意味着我的所有动画都在一起播放。我想知道是否有什么办法可以阻止这些功能一次性运行。

这是我的位置数组，每行包含我想要动画的不同数字，每行需要单独执行。

    position: [
        {x: 1400},
        {x: 2800},
        ]

当我的脚本到达这一点时，它会启动此功能

function animate (varStore) {
varStore.position.forEach(function(position) {
        $({value: startingValue}).animate({value: position.x}, {
            duration: 5000,
            step: function() { 
                variableToChange = this.value;
            }
        });
});

它比上面的要复杂一些，但是为了便于阅读，这是最基本的。

如何立即停止此for循环再次运行并等待上一个动画完成？

我到处寻找解决方案，但我似乎无法找到任何东西。

我可以完全改变我接近这一点的方式，我很欣赏任何有关如何让它真正发挥作用的建议。

Answer 1

我只想在这里使用原生Javascript setTimeout：

function animate (varStore) {
varStore.position.forEach(function(position) {
    var timer = setTimeout((function(){
        $({value: startingValue}).animate({value: position.x}, {
            duration: 5000,
            step: function() { 
                variableToChange = this.value;
            }
        });
    }), 5000);
});

排队变量动画

1 个答案: