Question

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

  $("#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");
 }

Answer 1

您考虑过jQuery .queue()吗？

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

通过这种方式，您可以构建您希望动画遵循的特定队列顺序

Answer 2

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

在所有其他渲染完成后调用您要执行的函数..比如

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

$(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"); 
}

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

2 个答案: