jQuery: Queuing fadeIn() and fadeOut() on different elements

Question

I've been working on this for several hours and I can't seem to figure out how to do this - I'm new to jQuery.

I want to fade out one div and then fade in another. I want to do this in sequence. I have tried putting fadeIn() in the callback of the fadeOut() function and queueing the two animations, but they still don't happen sequentially.

HTML:

<article id="foo">
    <div>one set of content, initially set to "display: block;"</div>
    <div id="bar">second set of content, initially set to "display: none;"</div>
    <div id="menu">the menu, which I don't want to fade</div>
</article>

Here are the two methods I've tried:

Using queue():

$("#foo div:not(#bar, #menu)").queue( function() {
    $(this).fadeOut('slow');
$(this).dequeue();
$("#foo div#bar").fadeIn('slow')    
});

Using the callback:

$("#foo div:not(#bar, #menu)").fadeOut('slow', function() {
    $("#foo div#bar").fadeIn('slow');   
});

This should be relatively simple as it's one I've seen on many websites - what am I doing wrong?

What does your html look like? There might be different approaches to take that make it easier... — David Thomas
What happens when using the callback? I've personally had success with that approach. Check out: paulirish.com/2008/… for one perhaps. — jlmakes
My HTML is: <article id="foo"> <div> ... one set of content, initially set to "display: block;" </div> <div id="bar"> ... second set of content, initially set to "display: none;" </div> <div id="menu">... the menu, which I don't want to fade </div> </article> — daysrunaway
If you are copy-pasting the code, the part using callbacks has a error, 3rd line should be }); and not )}; — jcane86
the selectors for each block look weird. I'd do $("#foo") and $("#bar") — jcane86

Robert Koritnik Robert Koritnik · Accepted Answer · 2011-04-10T23:40:38

Second method works fine: first fade out first div then in the callback fade in another.

Check my JSFiddle and see for yourself.

If your code doesn't work I suggest you check your code because the one you've provided surely is invalid:

your end brackets are invalidly sequenced: }) instead of your )}
your second selector (for fading in) should be $("#foo div#bar") otherwise nothing will fade in, because you don't have an element with class="foo" but rather id="foo".

Putting all the obstacles aside this should work:

$("#foo div:first").fadeOut("slow", function(){
    $("#foo #bar").fadeIn("slow");
});

jQuery: Queuing fadeIn() and fadeOut() on different elements

3 Answers