jquery finish one animation then start the other one

Question

I have one two divs and two seperate 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 its 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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

Edit: Have you checked out the accordion plugin (if thats what youre trying to do)

Answer 5

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 6

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 7

an example of this can be seen in JQuery for Beginners - Day 2

There are 15 days of these tutorials and they are a good resource. Enjoy!

Answer 8

Hey, I was spinning my wheels on this problem and getting no results at all with SetTimeout and so on, until I came here and got the principle of chaining functions together...now my animation chain works perfectly....thanks esp. to DrJokepu!

JeffE

Answer 9

$(ths).prevAll().animate({width:"0px",opacity:0.0},"slow",function(){animationstep2()});

animationstep2() will be call twice if i got 2 prevAll Element. Is it able to be call once only?