Question

我认为这是一个相对简单的Ajax /动画，我正在添加到客户端站点以在项目之间进行选择以显示为图像。流程如下：

用户点击项目概述（pHome）中的缩略图。
使用jQuery，ajax在XML文件中加载图像，标题和项目描述数据（project1）。
从XML文件构造HTML并将其注入DOM（div id =“project1”）。
Animate和（4.5）消除pHome。
淡入项目1。
为将用户带入项目的缩略图添加“抽吸”效果。

所有这些事情都需要同步发生，但我找不到合适的功能流程。将所有这些步骤附加到用户单击会在动画完成之前淡出pHome，并且在project1 div甚至可见之前触发'puff'效果。

实际上，我有所有这些步骤的功能，看起来真是一团糟。我要求的是构建这些函数的最佳实践方法，以便它们全部同步发生（可能除了2和3）。就像一个援助，这是我的问题的伪代码：

$('#thumbnail').live('click', function(){
    loadXML(thumbnail_id);
    makeHMTL(data);
    $('pHome').animate({blah}).fadeOut();
    $('project1').fadeIn();
    $('thumbnail_id').puff();
});

我知道这显然是一种不好的方法 - 但是我无法弄清楚如何嵌套/构造函数以使它们全部同步。而且我真的想要一个答案，让我有一些方法可以在将来构建我的功能以避免老鼠窝。教育我！：）

Answer 1

嵌套动画功能是一种可行的方法，但是当你做很多事情时可能会很讨厌，你很容易失去概述。

一个选项是将它们全部打包到一个对象中，并将引用传递给回调：

$('#thumbnail').live('click', animation.step1);

var animation = {
    step1: function() {
         $("#Element").show("puff", {}, "slow", animation.step2);
    },
    step2: function() {
         $("#Element").hide("linear", {}, "fast", animation.step3);
    },
    step3: function() {
         $("#Element").show("bounce", {}, 500);
    }
}

或者作为替代方案，您可以使用内置的动画队列，如下所示：

$("#go1").click(function(){
   $("#block1").animate( { width:"90%" }, { queue:true, duration:100 } )
               .animate( { fontSize:"24px" }, 1500 )
               .animate( { borderRightWidth:"15px" }, 1500);
})

另请查看文档：{{3}}

Answer 2

我建议你在loadXML函数中创建一个回调函数参数，以便能够在从服务器加载XML数据时执行makeHTML函数及其效果。

对于动画，您可以在前一个回调上执行以下动画，例如：

$('#thumbnail').live('click', function(){
    loadXML(thumbnail_id, function (data) { // data is loaded
      makeHMTL(data);
      $('pHome').animate({blah}, function () {
        $(this).fadeOut();
      });

      $('project1').fadeIn('slow', function () {
        $('thumbnail_id').puff();
      });

    });
});

您的loadXML函数可能如下所示：

  function loadXML (thmbId, callback) {
    $.post("/your/page", { thumbnail: thmbId }, function (data) {
      callback.call(this, data);
    });
  }

Answer 3

您可以使用回调对动画进行排序，如下所示：

$('#Div1').slideDown('fast', function(){
    $('#Div2').slideUp('fast');
});

另见Finish one animation then start the other one

Answer 4

动画，fadeIn和puff事件/动作都应该有自己的回调选项，这些回调选项在完成后调用。因此，你需要将它们嵌套，而不是像你一样将它们链接起来。

$("#pHome").animate({}, function(){
    $("#project1").fadeIn(500, function(){
        $("#thumbnail_id").puff();
    });
});

Answer 5

$("#thumbnail").live("click",function() {
    $.ajax({
        type: "GET",
        url: "myUrl.ashx",
        data: { param1: 1, param2: 2 },
        success: function(data, textStatus) {
            buildAndAppend(data); // Make sure it starts hidden.
            $("#Element").show("puff", {}, "slow", function() {
                anythingElse();
            });
        }
    });
});

Javascript函数流程的最佳实践？

5 个答案: