title: .mouseleave() with .delay() working together
body: <p>I have a list of several 'triggers' (<code>&lt;li&gt;s</code>), each trigger shows a specific DIV, and each DIV has 'close' button.</p>
  
  <p>Now, I want to improve the usability by adding a timer/delay to the opened/visible DIV so that after3 or 5 seconds after the user has moved his mouse away from the trigger, the opened/visible DIV fades out.</p>
  
  <p>The problem I'm having right now, is that whenever I add a function with .mouseleave(), the opened/visible DIV hides as soon as the mouse leaves the trigger area.</p>
  
  <p>However, if you remove the function, then the DIV stays visible and you're able to close it by clicking the close button.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/rzea/8gWJM/1/" rel="noreferrer"><strong>FIDDLE/DEMO</strong></a> of my situation.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks.</p>