Question

Is there anyway to wait for a jQuery animation to finish before proceeding with another command?

For example, I want to fade out/slide up an element, change some items within the element and then fade them back in/slide back down.

If I put the statements one after another, you can see the items change before the animation completes.

$('#item').fadeOut();
$('#item').html('Changed item');
$('#item').fadeIn();

Thanks.

Answer 1

You can pass callback in fadeIn/fadeOut. jQuery docs

$('#item').fadeOut('slow', function(){

     $('#item').html('Changed item');
     $('#item').fadeIn();
});