How do I stop an animation "mid-stream" and reverse it?
<p>Here is my HTML:</p>

<pre><code>&lt;div id="nav_bar"&gt;  
&lt;div id="nav_image"&gt;  
&lt;img src="navimage.jpg" /&gt;  
&lt;/div&gt;  
&lt;/div&gt;
</code></pre>

<p>and my jQuery:</p>

<pre><code>$("#nav_bar").mouseenter(showNav).mouseleave(hideNav);

function showNav(){  
$("#nav_image").stop().fadeIn(250); }

function hideNav(){  
$("#nav_image").stop().fadeOut(2500); }
</code></pre>

<p>The problem was that if the mouse re-entered the nav bar (which is larger in area than the nav image inside it) before the 2500ms were up, the animation would stick. I tried to add the stop() function but it either didn't seem to apply or would freeze up the whole script depending on my timing. I know I must be missing something fundamental...</p>
