如何在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>