jQuery show/hide element when hovering another element
<p>I have the following HTML as an example:</p>

<pre><code>&lt;div id="header"&gt;
&lt;div class="pagination"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and the following jQuery which should hide the pagination by default but then fade it in when a user hovers the header and then fades it back out when they move off the header:</p>

<pre><code>            $(".pagination").hide();
            $("#header").mousemove(function()
            {
                $(".pagination").fadeIn(1500);
            });
            $("#header").mouseleave(function()
            {
                $(".pagination").fadeOut(1500);
            });
</code></pre>

<p>The problem I have is that it will run through the code the same number of times a user hovers the header so for example if I hovered 5 times in a row the pagination would fade in and out 5 times. This is not the function I want, rather a simple fade in and out when a user is hovering the header.</p>

<p>Can anyone help? Thanks.</p>
