CODEWITHSUNDEEP
javascriptjqueryhideshow
Peter Stuart
Peter Stuart

Reputation: 2434

Wait until animation completes to run the next one

I have this code:

$("div#element").hide("fast");
$("div#aelement-2").show("fast");

How can I make #aelement-2 fade in after #aelement has faded out?

Upvotes: 0

Views: 136

Answers (3)

Vigrond
Vigrond

Reputation: 8198

Here's an example: http://jsfiddle.net/f8key/1/

You can use delay()

$("#d1").hide('fast');
$("#d2").delay('fast').show('fast');

Reference: http://api.jquery.com/delay/

Upvotes: -1

Gajus
Gajus

Reputation: 73808

Have you looked at the documentation? http://api.jquery.com/hide/

.hide( [duration] [, easing] [, callback] )

The callback parameter is your answer.

Upvotes: 3

David Hellsing
David Hellsing

Reputation: 108500

I’m not sure I understand your question, but you can use callbacks:

$("div#element").hide("fast", function() {
    $("div#aelement-2").show("fast");
});

This will not start showing #aelement-2 until #element has done animating.

Upvotes: 5

Related Questions