jQuery中的同步动画，不使用回调？

我不能使用回调，因为我有这样的场景（伪代码）：

---

我无法将扩展动画放在

扩展框

生长动画的回调中，因为它可能并不总是发生。但我需要第二个动画，直到上一个动画完成。如何执行此操作？

您可以将第二个动画的代码封装在函数中，然后从第一个动画的回调调用该函数，或者在第一个动画未发生时调用该函数。假设这个想法是缩小一些其他控件，这些控件在上一次单击时具有“expanded box”类：

$('.box').on('click', function() {
    var $this = $(this),
        $exp = $(".expanded-box");

    function grow() {
       $this.animate({
           width: "200px", height: "100px"
       }).addClass('expanded-box');
    }

    if ($exp.length > 0) {
       $exp.animate({
           width: "100px", height: "50px"
       }, grow).removeClass("expanded-box");
    } else {
       grow();
    }        
});​

---

演示：

自jQuery 1.6以来，您可以使用来获取一个在给定元素上的所有动画完成后将被解析的动画。此外，文件中说：

在没有活动动画的集合上使用.promise（）将返回 决心承诺

因此，它非常适合您的用例，您可以编写：

$('.box').on('click', function() {
    var $this = $(this);
    $('.expanded-box').animate({
        // shrink it
    }).promise().done(function() {
        $this.animate({
            // grow it
        }).addClass('expanded-box');
    });
});

---

你所说的“可能不总是发生”是什么意思？你的意思是

.expanded box

可能不存在吗？酷。我曾想过这个，但希望有一个更优雅的解决方案。我以为jQuery中有某种动画队列特性，这肯定是一种动画队列特性。它过去只适用于每个元素，但“从jQuery 1.7开始，队列选项也可以接受字符串，在这种情况下，动画将添加到该字符串表示的队列。”-但我从未使用过该功能，因此我不确定它到底是如何工作的。很酷，我甚至不知道

promise（）

-谢谢！它也适用于许多不同的方法。这与将第二部分放入第一个动画的完整回调中有什么不同？@nnnn，如果

$（“.expanded box”）

与任何内容都不匹配，则不会调用

complete

回调，因为每个匹配的元素都会调用一次。另一方面，

promise（）

如果在空jQuery对象上调用，则返回一个已解析的

promise

对象，因此确保传递给

done（）

的函数在所有情况下都被调用（即，即使在第一次单击时，还没有展开任何框）。这是我见过的最干净的方法。谢谢这太棒了：谢谢D

$('.box').on('click', function() {
    var $this = $(this);
    $('.expanded-box').animate({
        // shrink it
    }).promise().done(function() {
        $this.animate({
            // grow it
        }).addClass('expanded-box');
    });
});