title: jQuery: Queuing fadeIn() and fadeOut() on different elements
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;article id="foo"&gt;
      &lt;div&gt;one set of content, initially set to "display: block;"&lt;/div&gt;
      &lt;div id="bar"&gt;second set of content, initially set to "display: none;"&lt;/div&gt;
      &lt;div id="menu"&gt;the menu, which I don't want to fade&lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>Here are the two methods I've tried:</p>
  
  <p>Using queue():</p>
  
  <pre><code>$("#foo div:not(#bar, #menu)").queue( function() {
      $(this).fadeOut('slow');
  $(this).dequeue();
  $("#foo div#bar").fadeIn('slow')    
  });
  </code></pre>
  
  <p>Using the callback:</p>
  
  <pre><code>$("#foo div:not(#bar, #menu)").fadeOut('slow', function() {
      $("#foo div#bar").fadeIn('slow');   
  });
  </code></pre>
  
  <p>This should be relatively simple as it's one I've seen on many websites - what am I doing wrong?</p>