I have a list of several 'triggers' (`<li>s`), each trigger shows a specific DIV, and each DIV has 'close' button.

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.

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.

However, if you remove the function, then the DIV stays visible and you're able to close it by clicking the close button.

Here's a [**FIDDLE/DEMO**](http://jsfiddle.net/rzea/8gWJM/1/) of my situation.

Any help would be greatly appreciated.

Thanks.