在jquery中设置动画：在一组动画完成后运行函数

我正在制作一组需要一起移动的div的动画。每个div将遵循不同的路径，并在同一时间、同一时段内移动

在这段动画结束后，我想运行一些代码来重画一些其他的东西

我使用jquery来实现这个。下面是我正在做的工作的示例代码：

    // units is an array containing the divs encapsulated on $()
for (var i = 0; i < units.length; i++)
{
    var unit = units[i];
    var idUnit = unit.attr('id');

            // New coordinates
    var xNew = layout.x[idUnit];
    var yNew = layout.y[idUnit];

            // Actual coordinates
    var xAct = x(unit);
    var yAct = y(unit);

            // Animate!
    unit.animate(
            {left: xNew, top: yNew}, {
                duration: 1000, 
                easing: 'easeOutBack'
            }
    );
}

---

有办法做到这一点吗？或者我应该重写代码，只使用一个动画调用，并向其传递一个自定义步进器函数？…

使用

setTimeout（function（）{/*do callback*/}，1000）

其中1000是暂停的持续时间。将这一行添加到for循环的后面。

如果您有一个名为

$units

的jQuery变量，它保存所有要设置动画的元素，则可以执行以下操作：

$units.each(function() {
    var $unit = $(this),
        id = $unit.attr('id');

    var xNew = layout.x[id],
        yNew = layout.y[id];

    $unit.animate({ left: xNew, top: yNew },
        { duration: 1000,  easing: 'easeOutBack' });
}).promise().done(function() {
    // This will execute after all the animations have finished.
});

---

我想这样做，但我对同步有一些顾虑。如果我使用jquery动画API，jquery将在同一调用中同时启动所有内容，对吗？如果我计划在调用setTimeout的同时启动一些其他动画，那么我的代码将有一个竞争条件，我不知道将首先执行哪个调用，对吗？效果很好！我花了一些时间来理解这个承诺。我真的需要花一些时间来更深入地研究jquery！

$units.each(function() {
    var $unit = $(this),
        id = $unit.attr('id');

    var xNew = layout.x[id],
        yNew = layout.y[id];

    $unit.animate({ left: xNew, top: yNew },
        { duration: 1000,  easing: 'easeOutBack' });
}).promise().done(function() {
    // This will execute after all the animations have finished.
});