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 first div (slidingUp) and then open the other div (slidingDown) but, at the moment it's like while one div is sliding down, the other, also in the same time, is sliding up.

Is there a way that would tell jQuery to wait to finish sliding down of one div and only then start sliding up the other?

Answer 1

$('#Div1').slideDown('fast', function(){
    $('#Div2').slideUp('fast');
});

Edit: Have you checked out the accordion plugin (if that's what you're trying to do)?

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