jquery callback when animate in progress

Question

I would like to know how to have a callback whenever animate is in progress, ie starts the animation.

This is the code I tried:

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

I don't want #c to animate when #b animation is complete.

For example, I want #c to start to animate after 0.5 seconds after #b animation start.

a callback is by definition something that runs after something finishes. This may help though. http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously — DevDonkey, Mar 11 '15 at 15:19
thanks :) is it about the queue()? i still dont know what is the queue() effect, i should read more tutorial, thank you :) — aboutjquery, Mar 11 '15 at 15:42

Roamer-1888 · Accepted Answer · 2015-03-11T21:10:59.073

Just start #c's animation after the required delay using jQuery's .delay() method.

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

EDIT

Here's a couple of ways to do something whe both animations are complete.

Crude :

$('#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.
    });
});

More sophisticated :

$('#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.
    })
});

its work, thank you so much :) can i ask something more? is it allow? or i should open a new question? how can i have a callback when #b and #c is finish animation? if ask in comment is not allow, please let me know, i will edit it, thanks :) — aboutjquery, Mar 11 '15 at 15:34

jquery callback when animate in progress

1 Answers1