jquery 动画进行时的回调

Question

我想知道如何在 animate 进行时进行回调，即开始动画。

这是我试过的代码：

$('#a').on('click', function() {
  $('#b').animate({opacity: 0}, 1000, function() {
    // animation complete
    $('#c').animate({opacity: 0, 1000};
  });
}

当 #b 动画完成时，我不希望 #c 到 animate。

例如，我希望 #c 在 #b 动画开始后 0.5 秒后开始动画。

Answer 1

使用jQuery的.delay()方法在所需的延迟后启动#c的动画。

$('#a').on('click', function() {
    $('#b').animate({opacity: 0}, 1000);
    $('#c').delay(500).animate({opacity: 0}, 1000);
});

编辑

在两个动画都已完成时，有两种方法可以执行某些操作。

原油：

$('#a').on('click', function() {
    $('#b').animate({opacity: 0}, 1000);
    $('#c').delay(500).animate({opacity: 0}, 1000, function() {
        //here, #c's animation is guaranteed to be complete, but also #a's due to the timing/durations.
    });
});

更复杂：

$('#a').on('click', function() {
    var promise_b = $('#b').animate({opacity: 0}, 1000).promise();
    var promise_c = $('#c').delay(500).animate({opacity: 0}, 1000).promise();
    $.when(promise_b, promise_c).then(function() {
        //here, both animations are guaranteed to be complete.
    })
});

jquery 动画进行时的回调

jquery callback when animate in progress

jquery

callback

jquery-animate