等待動畫功能在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動畫功能，jquery通常會提供一個complete參數，該參數將在函數完成時調用。

使用fadeout：

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

Answer 2

您可以使用jQuery的queue保持排隊的前一個完成後纔出現的動畫列表。

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 3

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