javascript - 等待javascript中的动画功能

Question

我在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()没有任何运气。

有什么建议么？

Answer 1

您可以使用 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();
});

Answer 2

您可以使用 jquery 的promise()函数在所有动画结束时调用回调。

试用：

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);
    });
};

Answer 3

如果你使用的是jquery动画函数，jquery一般会提供一个complete参数，当函数完成时会调用这个参数。

使用fadeout：

$('#test').fadeOut('slow', function() {
  // fadeout is finished!! do something
});