等待javascript中的动画函数

我在javascript中有以下方法：

Controller.prototype.changeScene = function (curScene, newScene) {
    sf.scene.hide(curScene);
    sf.scene.show(newScene, curScene);
    sf.scene.focus(newScene);
};

在另一个JS类中：

Test.prototype.handleHide = function () {
    alert("SceneDialog.handleHide()");
    $(".screenOverlay").fadeOut("slow");
    $(".dialogBox").fadeOut("slow");
};

sf.scene.hide（）

调用

handleHide

方法。在

handleHide

中有一些动画，但没有显示。控制器不会等待它完成

我尝试了

$.when（sf.scene.hide（））.done（）

，但没有任何运气

---

有什么建议吗？

如果使用jquery动画函数，jquery通常会提供一个

complete

参数，该参数将在函数完成时调用

使用：

您可以使用jQuery保存一个动画列表，这些动画仅在上一个动画完成后才排队出现

sf.scene.hide(curScene);
sf.scene.show(newScene, curScene);
sf.scene.focus(newScene);

将成为：

sf.scene.hide(curScene);
sf.scene.queue(function() {
    $(this).show(newScene, curScene);
    $(this).dequeue();
});
sf.scene.queue(function() {
    sf.scene.focus(newScene);
    $(this).dequeue();
});

当所有动画结束时，可以使用jquery函数调用回调

试用：

Test.prototype.handleHide = function (callback) {
    $(".screenOverlay,.dialogBox").each(
        function(i) {
            $( this ).fadeOut("slow");
        }
    );
    $(".screenOverlay,.dialogBox").promise().done(callback);
};

并将回调作为参数传递给handleHide。您的changeScene函数应如下所示：

Controller.prototype.changeScene = function (curScene, newScene) {
    sf.scene.hide(curScene, function() {
        sf.scene.show(newScene, curScene);
        sf.scene.focus(newScene);
    });
};

---

您正在使用哪些动画功能<代码>动画

fadeout

和

fadein

具有完成时的回调函数哪些动画正在等待完成？如前所述，两个淡出将执行，并立即返回下一个语句。

webkittransionend

otransionend

otransionend

transitionend

msTransitionEnd

事件在这里没有帮助？CSS转换不起作用，sf.scene.show（）用一个全新的标记和css覆盖当前场景。这将调用回调2x，还是等到两个淡入淡出动画完成并调用回调一次？这是一个好问题。下面是jquerydoc语句：“如果多个元素都设置了动画，那么需要注意的是，回调对每个匹配的元素执行一次，而不是对整个动画执行一次。”。没错，回调将执行两次。似乎promise（）方法就是为了这个目的而创建的：谢谢您的回复！调用hide时出现以下错误：TypeError:“undefined”不是函数（计算“$”（“.screenOverlay.dialogBox”）.fadeOut（“slow”）.promise（）。我正在尝试解决它：）尝试使用.each（）方法处理$（'.screenOverlay.dialogBox）类，如以下示例所示：

Controller.prototype.changeScene = function (curScene, newScene) {
    sf.scene.hide(curScene, function() {
        sf.scene.show(newScene, curScene);
        sf.scene.focus(newScene);
    });
};