动画正在进行时的jquery回调

时间:2015-03-11 15:12:04

标签: jquery callback jquery-animate

我想知道在animate正在进行时如何进行回调,即启动动画。

这是我尝试过的代码:

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

#c动画完成时,我不希望animate#b

例如,我希望#c#b动画启动后0.5秒后开始制作动画。

1 个答案:

答案 0 :(得分:0)

使用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.
    })
});