CODEWITHSUNDEEP
jquery
Franklin Noel
Franklin Noel

Reputation: 109

Jquery fadeOut queue

I have two div's. One with a black background and one purple. I use jquery to fade out the black div and also to fade in the purple one. However it seems as if both are trying to happen at the same time.

My question is how do I make the the purple div fade in after and only after the purple div has completely faded out. I have heard of the queue method but I am not clear on how to use it.

$("div.black").fadeOut();
$("div.purple").fadeIn().queue(); // <-- purple div still trys to fade in
// while black div is fading out.  
// I need the purple div to wait 
// until that black div has completely faded out.

Upvotes: 1

Views: 1788

Answers (4)

dougmacklin
dougmacklin

Reputation: 2610

fadeIn / fadeOut take a callback function as one of their parameters. That function is executed as soon as the animation is complete:

$(".black").fadeOut(function() {
    // this will run once the fadeOut animation is complete
    $(".purple").fadeIn();
});

Fiddle: http://jsfiddle.net/fAbBn/

Upvotes: 2

jackerman09
jackerman09

Reputation: 2630

You can consider using setTimeout, which takes a function and a time to wait in milliseconds. I think something like this should work:

$("div.black").fadeOut(500);
setTimeout(function() {
    $("div.purple").fadeIn()
}, 600)

Upvotes: 0

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7031

try this using the callback

$("div.black").fadeOut(400,function(){
    $("div.purple").fadeIn().queue();
});

Upvotes: 3

Trevor
Trevor

Reputation: 16116

Like this

$("div.black").fadeOut(function(){
    $("div.purple").fadeIn();
});

Upvotes: 10

Related Questions