CODEWITHSUNDEEP
javascriptjquery
Subliminal Hash
Subliminal Hash

Reputation: 13744

Finish one animation then start the other one

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?

Upvotes: 15

Views: 29189

Answers (8)

Johannes Reiners
Johannes Reiners

Reputation: 678

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

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

Upvotes: 5

Andrew Bullock
Andrew Bullock

Reputation: 37378

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

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

Upvotes: 20

Tamas Czinege
Tamas Czinege

Reputation: 121294

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.

Upvotes: 5

Tader
Tader

Reputation: 26832

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

Upvotes: 1

Josh Mein
Josh Mein

Reputation: 28625

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!

Upvotes: 0

airportyh
airportyh

Reputation: 22668

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

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

Upvotes: -1

Jiaaro
Jiaaro

Reputation: 76898

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

Upvotes: 0

Bryan A
Bryan A

Reputation: 3634

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

Upvotes: 0

Related Questions