How to do something after an event in jQuery?

Question

I want to play an animation when another animation is done.

I used this code:

$("#test_01").stop().animate({height: '500'}, 2500).promise($("#test_02").fadeIn(2500));

This animates the two at the same time - that isn't what I want. I need $("#test_01") to work first, and after that $("#test_02") needs to be run.

How can I do that?

Answer 1

Try done with your code:

$("#test_01").stop().animate(
    {height: '500'},
    2500
).promise().done(
    function(){
        $("#test_02").fadeIn(2500)
    }
); 

The done function callback will work after all the code from animation has completed.