暂停执行直到其他动画完成jQuery答案

【问题标题】：Pausing execution until other animations are complete jQuery暂停执行直到其他动画完成jQuery
【发布时间】：2012-12-21 18:55:42
【问题描述】：

我有几个如下打开的对话框：

  $("#dialog").load("/ajax/content.php");
  $("#dialog").dialog({....});

和一个全局事件监视器来动画对话框的打开

 $(document).on("dialogOpen", ".dialogClass", function() {
     var parent = $(this).parent();
     parent.css("left","-768px");
     parent.animate({
             left:0
     }, speed, "easeOutBounce");
 }

在某些页面上，这看起来很不稳定。我怀疑这些动画是在对话框加载和呈现其 ajax 调用的结果时发生的。有什么方法可以暂停，直到所有其他动画都完成，例如：

 $(document).on("dialogOpen", ".dialogClass", function() {
     //Wait until other rendering is complete prior to executing further
     var parent = $(this).parent();
     parent.css("left","-768px");
     parent.animate({
             left:0
     }, speed, "easeOutBounce");
 }

【问题讨论】：

标签： javascript jquery ajax dialog rendering

【解决方案1】：

你考虑过jQuery .queue()吗？

查看：http://api.jquery.com/queue/

有了这个，你可以建立一个你希望你的动画遵循的特定队列顺序

【讨论】：

【解决方案2】：

可能是 jquery 回调功能会有所帮助..

在所有其他渲染完成后调用你想要执行的函数..like

操作完成后显示警报的简单示例

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("slow",function(){
      somefunction(); // this will execute after the completion of function
    });
  });
});

somefunction()
{
alert("The paragraph is now hidden"); 
}

【讨论】：