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

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 a开发者_StackOverflow中文版re 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?

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:

1. your end brackets are invalidly sequenced: }) instead of your )}
2. 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");
});

Maybe retry your second method? It is working for me. I ran this in the dev console here on stackoverflow and it worked as expected, fading out first the tags for this question, then the stackoverflow logo:

$(".tagged").fadeOut('slow', function () { $("#hlogo").fadeOut('slow'); });

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

Yeah, this isn't right for that HTML, see Rob's answer