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

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

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

我无法将扩展动画放在expanded-box增长动画的回调中，因为它可能并不总是发生。 但是我需要第二个动画才能等到上一个动画完成。 我怎样才能做到这一点？

Answer 1

从jQuery 1.6开始，您可以使用promise（）来获取Promise对象 ，该对象将在给定元素上的所有动画完成后解析。 另外，文档说：

在没有活动动画的集合上使用.promise（）将返回已解析的Promise。

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

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

Answer 2

您可以将第二个动画的代码封装在一个函数中，然后从第一个动画的回调中调用该函数， 或者如果第一个动画没有发生则调用它。 假设这个想法是缩小一些其他控件，它具有前一次点击的“扩展框”类：

 $('.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(); } });​ 

演示： http ： //jsfiddle.net/PXddm/