title: How do I fadeOut one div and FadeIn another?
body: <p>My goal is to:  </p>
  
  <ul>
  <li>On mouse over, fade out 'foo' and fade in 'bar'</li>
  <li>On mouse out, fade out 'bar' and fade in 'foo'</li>
  </ul>
  
  <p>I'm able to fade out 'foo' on mouse over, but I'm not able to fade in 'bar' and then return to normal state when I move the mouse outside the 'bar' div.</p>
  
  <p>I have the following code:</p>
  
  <p>html</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;div class="foo"&gt;&lt;/div&gt;
      &lt;div class="bar"&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="foo"&gt;&lt;/div&gt;
      &lt;div class="bar"&gt;&lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>li .bar { display: none; }
  </code></pre>
  
  <p>js</p>
  
  <pre><code>// On mouse over, fade out 'foo' and fade in 'bar'
  jQuery('.foo').mouseover(function() {
    jQuery(this).fadeOut(function() {
      jQuery('.bar').fadeIn(); &lt;-- This is wrong. I need to get the bar inside this li
  });
  
  // On mouse out, fade out 'bar' and fade in 'foo'
  jQuery('.bar').blur(function() {
    jQuery(this).fadeOut(function() {
      jQuery('.foo').fadeIn();
  });
  </code></pre>
  
  <p>Here is my bad jsFiddle attempt: <a href="http://jsfiddle.net/TvCT5/2/" rel="nofollow">http://jsfiddle.net/TvCT5/2/</a></p>
  
  <p>Appreciate a push in the right direction :)</p>