如何让JavaScript程序的其余部分等待jQuery动画

我有一个简单的应用程序，用户点击一个区域，计数器移动许多步。我使用一个类似控制台的输出窗口来提醒用户任何更改。为了移动计数器，我使用

For

循环来运行jQuery动画，如下所示：

function glideMove() {
    //for length of moveNum, animate square step
    for (var i=1; i <= moveNum; i++) {
        $("#thingToAnimate").animate();
    }// end for loop
    //set squareOn to moveNum
    squareOn += moveNum;
}// end glideMove

函数glideMove（）{
//对于moveNum的长度，设置方形步长的动画
对于（变量i=1；i=END_平方）{
完成这个（）；
}否则{
glideMove（）；
$（“#thingToAnimate”）.append（“您现在在正方形上：+squareOn+”）.scrollTop（大数字）；//不是
//再次滚动
$（“#thingToAnimate”）.append（“再次滚动.”）.scrollTop（大数字）；
}//结束，否则如果
}//末端移动计数器

我想要的是对输出的一个警告，即移动动画已经开始。一旦结束，我希望对输出发出警报，表明它已完成移动，准备继续

但我的问题是，所有输出警报都会在动画仍在进行时运行

---

我想要的是运行jQuery动画序列，并让程序的其余部分等待该序列完成。此函数从代码中的多个不同位置调用，函数完成后会产生不同的结果

您应该为调用

animate（）

订阅

complete

事件

    $('#id').animate({
    //Parameters
      }, duration, function() {
        // Animation complete.
       //show your completion alert here
      });

function glideMove(callback) {
    //for length of moveNum, animate square step
    for (var i=1; i <= moveNum; i++) {
        //----- New Code -----
        var options = {};
        if (i === moveNum)
            options.complete = callback;
        $("#thingToAnimate").animate({}, options);
        //----- New Code -----
    }// end for loop
    //set squareOn to moveNum
    squareOn += moveNum;
}// end glideMove

---

您应该为

animate（）

调用订阅

complete

事件

function glideMove(callback) {
    //for length of moveNum, animate square step
    for (var i=1; i <= moveNum; i++) {
        //----- New Code -----
        var options = {};
        if (i === moveNum)
            options.complete = callback;
        $("#thingToAnimate").animate({}, options);
        //----- New Code -----
    }// end for loop
    //set squareOn to moveNum
    squareOn += moveNum;
}// end glideMove

---

我也很想看到答案（对JS动画了解不多），但是从可用性的角度来看，我会考虑允许其他活动停止动画（直接移动到它的最终状态）的选项。人们很快就会厌倦动画的新奇性，并希望他们能继续前进。你可以将一个函数传递给glideMove（），它可以在循环后执行。@GregPettit你可能是对的，我以后可能会按照你的建议工作，但是，这只是一个简单的学习项目，我想我会把它放在这一点上，现在我也很想知道答案（不知道很多关于JS动画），但是从可用性的角度来看，我会考虑允许其他活动停止动画（直接移动到它的最终状态）的选项。人们很快就会厌倦动画的新奇性，并希望他们能继续前进。你可以将一个函数传递给glideMove（），它可以在循环后执行。@GregPettit你可能是对的，我以后可能会按照你的建议工作，但是，由于这只是一个简单的学习项目，我想我现在就到此为止。我不认为我能够使用它，因为，正如我上面的问题所说，这个函数将从不同的地方调用，随后会发生不同的事件。好的！然后，您可以考虑将<代码>回调< /代码>函数传递给<代码> GalDeMef！我正在更新代码。请稍等！这个更新的答案很好，但是我需要在动画序列发生之后运行其余的代码，所以在

for

动画循环完成之后。我编辑了我的问题以反映这一点。对不起，如果我没有说清楚。那么你的意思是说你有一个动画队列，你想在队列处理完成后得到通知吗？是的，在

glideMove

函数中，有一个

for

循环，它将重复多次，我希望在所有这些动画完成后发出警报。我不认为我能够使用此功能，因为正如我上面的问题所述，此功能将从不同的位置调用，随后会发生不同的事件。好的！然后，您可以考虑将<代码>回调< /代码>函数传递给<代码> GalDeMef！我正在更新代码。请稍等！这个更新的答案很好，但是我需要在动画序列发生之后运行其余的代码，所以在

for

动画循环完成之后。我编辑了我的问题以反映这一点。对不起，如果我没有说清楚。那么你的意思是说你有一个动画队列，你想在队列处理完成后得到通知吗？是的，在

glideMove

函数中，有一个

for

循环将重复多次，我希望在所有动画完成后发出警报。

function moveCounter() {
    $("#thingToAnimate").append("Moving...  ").scrollTop(BIG_NUMBER);
    //if square will be last, finish game
    if (squareOn + moveNum>= END_SQUARE) {
        finishThis();
    } else {
        glideMove(function() {
            //specific code on this specific 'glideMove' animation
        });
        $("#thingToAnimate").append("you are now on square: " + squareOn + ".<\/br >").scrollTop(BIG_NUMBER);//not
        //roll again
        $("#thingToAnimate").append("Roll again. <br \/>").scrollTop(BIG_NUMBER);
    }// end else if
}// end moveCounter