title: How to properly crossfade text on hover with jquery
body: <p><a href="http://jsfiddle.net/mplungjan/8wf5E/" rel="nofollow">http://jsfiddle.net/mplungjan/8wf5E/</a> (works now - using .hover() )</p>
  
  <p>The following obviously fails when hovering over the fading divs since that triggers the mouseout and in. I only need the actual text to fade in and out, the wrapping divs are only for containment and debugging. A solution without position:absolute is preferred</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="one" class="fade"&gt;One&lt;/div&gt;
    &lt;div id="two" class="fade"&gt;Two&lt;/div&gt;
  &lt;/div&gt;   
  
  $(document).ready(function() {
    $("#container").mouseover(function () {
      $("#one").fadeOut("slow");
      $("#two").fadeIn("slow");
    }).mouseout(function () {
      $("#two").fadeOut("slow");
      $("#one").fadeIn("slow");
    });;
  }); 
  
  div { margin:3px; width:80px; height:80px; float:left; }
  div#container { width: 100px; height:100px; border:1px solid black}
  div#one { position:absolute; border:1px solid red;}
  div#two { position:absolute; border:1px solid green; display:none; }
  </code></pre>