Question

我正在尝试一个接一个地运行3个动画，这样只有当第一个动画完成时才会进行第二个动画，并且只有在第二个动画完成第三个动画之后才会运行。

我可以使用嵌套的jQuery动画回调

来做到这一点

    go("one", function () {
        go("two", function () {
            go("three", null);
        });
    });

但是，我希望能够使用jQuery promises / deferred做到这一点。我一直在创建一个延迟对象并返回它的承诺。动画回调现在设定了解决的承诺，只是在这一点上，我期待“然后”开始：

go("one").then(go("two")).then(go("three"));

虽然所有动画同时出现但会发生什么。

有人能看到我错过的东西吗？

Answer 1

您正在调用这些函数而不是调用它们，您的代码就像以下回调一样：

go("one", go("two", go("three")))

相反，链接函数：

go("one").then(function(){ return go("two"); }).
          then(function(){ return go("three"); });

或者使用bind返回带有固定参数的函数：

go("one").then(go.bind($, "two")).then(go.bind($, "three"));

尽可能see here。请注意，您的代码中也有the deferred anti pattern - 您的go函数可以简化为：

function go(id, c) {
    return $("#" + id).animate({
        left: "300px"
    }).promise()
}