Question

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

到目前为止，我有这个：

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

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

Answer 1

您可以使用$.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>

Answer 2

就像打电话一样：

$element1.add($element2).promise().done(function(){
  //callback when all animations are done
});

＆＃13;

var $element1 = $('div.first');
var $element2 = $('div.second');

$element1.animate({
  top: $element2.position().top
}, 200);
$element2.animate({
  top: $element1.position().top
}, 200, function() { /* callback code */ });

$element1.add($element2).promise().done(function() {
  console.log('callback when all animations are done');
});

＆＃13;

div {
  position: absolute;
}
div.second {
  top: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
  DIV1
</div>
<div class="second">
  DIV2
</div>

＆＃13;

Answer 3

以下是2个动画完成后如何调用回调

function doAnimation(callback) {
    var i = 0;
    var progress = function () {
        i++;
        if (2 == i) {
            callback && callback();
        }
    };
    $element1.animate({ top: element2_pos }, 200, progress);
    $element2.animate({ top: element1_pos }, 200, progress);
}

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

3 个答案: