Javascript / jQuery: Only fire animation if mouse isn't over the element after page load
<p>I have a slider on a page and a function that fades out the previous/next arrows after a few seconds, and then when the user hovers over the slider they fade back in. The only issue is that when the slider loads and the user has their mouse hovering over it, the arrows still fade out, and the user has to move the mouse outside of the arrows and then back in to see them again. Here is my code:</p>

<pre><code>var prevNextBtns = $('.direction-nav'),
    fadeOutArrowsTime  = 3000;

setTimeout(function () {
    prevNextBtns.stop().animate({'opacity': '0'}, fadeOutArrowsTime);
}, fadeOutArrowsTime);

prevNextBtns.closest('.slider-container').hover(function () {
    prevNextBtns.stop().animate({'opacity': '1'}, 500);
}, function () {
    prevNextBtns.stop().animate({'opacity': '0'}, 500);
});
</code></pre>

<p>Basically I want the arrows to fade out after <code>3000</code> after the page loads, but <em>only</em> if the user doesn't have their mouse over.</p>
