jQuery slow fade element on interval and fade back in if user hovers
<p>I'm using jQuery to show some notifications to the user which will appear on screen using the jQuery append method. Once they appear on screen I want to wait say 5 seconds and THEN slowly begin to fade the element out before removing it from the DOM. It should only begin its fade after 5 seconds and not start fading straight away. If a user hovers the element then it should fade the element back in and then when the user removes hover then it should begin fading out again.</p>

<p>I have this so far:</p>

<pre><code>        setTimeout(function()
            {
                $(".Notification").fadeOut("slow", function ()
                {
                    $(this).remove();
                });

            }, 5000);
</code></pre>

<p>So this fades out the element after the time out but how do I make it so when a user hovers the element it fades back in. When the user removes hover it will begin fading out again (note: we don't need to wait anymore just reverse the fade everytime they hover the element unless it gets to the end of its fade and is removed)</p>

<p>Can anyone help? I presume it's just a simple case of wrapping the fadeOut part with some additional code but I'm struggling and would appreciate some help.</p>

<p>Also their could be multiple notifications appearing on the page so they all need to fade out based on their own appearance on screen and not fade them all out at the same time.</p>

<p>Effectively this is mimicking the new mail box you see in the bottom right of your screen when using Microsoft Outlook.</p>

<p>Thanks</p>
