Finish one animation then start the other one

Question

I have two divs and two separate links that triggers slideDown and slideUp for the divs.

When one of the divs are slided down and I click the other one, I hide the f

Answer 1

$("#thisDiv").slideUp("slow", function() {
    // This function is called when the slideUp is done animating
    $(this).doNextThing();
});

Answer 2

You should chain it like this

function animationStep1()
{
   $('#yourDiv1').slideUp('normal', animationStep2);
}

function animationStep2()
{
   $('#yourDiv2').slideDown('normal', animationStep3);
}

// etc

Of course you can spice this up with recursive functions, arrays holding animation queues, etc., according to your needs.

Answer 3

A bit cleaner example and with a delay between the animation:

$("#elem").fadeIn(1000).delay(2000).fadeOut(1000);

Answer 4

You can use a callback to fire a next effect when the first is done:

$("#element1").slideUp(
    "slow", 
    function(){
        $("#element2").slideDown("slow");
    }
);

In this example the function defined as second argument to the slideUp method gets called after the slideUp animation has finished.

See the documentation: http://docs.jquery.com/Effects/slideUp

Answer 5

Most jquery functions have a callback parameter, you can just pass a function into that.

Answer 6

Use the second parameter of the function: callback. For example,

$(this).slideDown( speed, function(){
    $(this).slideUp();
});