javascript – 如何使用元素动画的jQuery承诺？

如何在2个动画完成后调用回调？动画应该同时发生,但在两者完成后,应该运行回调.

到目前为止我有这个：

$element1.animate({top: element2_pos}, 200);
$element2.animate({top: element1_pos}, 200, function(){ /* callback code */ });

如何将其与promise或deferred对象组合？是否有一种聪明的方式加入这两个动画？

解决方法:

你可以使用$.when()

提供一种基于零个或多个对象执行回调函数的方法,通常是表示异步事件的Deferred对象.

var animDiv1 = $("div.div1").animate({ left: 200 }, 1000),
  animDiv2 = $("div.div2").animate({ left: 200 }, 2000);

$.when(animDiv1, animDiv2).done(function() {
  console.log("done");
})

div {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0px;
  background-color: red
}
.div1 { top: 0 }
.div2 { top: 50px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1"></div>
<div class="div2"></div>