title: Jquery stop fadeOut animation on Mouseleave
body: <p>Is there a way to stop an <code>fadeOut()</code> animation on <code>mouseleave</code> in jQuery? 
  I want the script to work like:</p>
  
  <ul>
  <li>1: When user mouse over text, show a div </li>
  <li>2: When user mouse out of    text hide the div, but if the user
  instead hover over container, the    div must continue showing!</li>
  </ul>
  
  <p>This is what i'm working at:</p>
  
  <pre><code>$(document).ready(function(){    
      $('.this').hover(function(){
          $('#container').fadeIn(200);
      }).mouseleave(function(){
          setTimeout(function () {
          $('#container').fadeOut(200);
      }, 1000);
      })
  
      $('#container').hover(function(){
          $('#container').stop().show();
      })
  
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/y36ta/" rel="nofollow">Fiddle</a></p>