How do I stop an animation "mid-stream" and reverse it?

Question

Here is my HTML:

<div id="nav_bar">  
<div id="nav_image">  
<img src="navimage.jpg" />  
</div>  
</div>

and my jQuery:

$("#nav_bar").mouseenter(showNav).mouseleave(hideNav);

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

function hideNav(){  
$("#nav_image").stop().fadeOut(2500); }

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...

Answer 1

Not sure about anyone else, but I've always had better luck just using .animate() in a situation where the effect may need to be stopped and reversed.

Example: http://jsfiddle.net/F5kGg/1/

$("#nav_bar").mouseenter(showNav).mouseleave(hideNav);

function showNav(){  
    $("#nav_image").stop().animate({opacity:1},250); }

function hideNav(){  
    $("#nav_image").stop().animate({opacity:0},2500); }​

---

EDIT: As noted by @Nick Craver .hover() is a convenient alternative to mouseenter and mouseleave, since it accepts two functions representing both events.

http://api.jquery.com/hover/

Answer 2

$("#nav_bar").hover(function(){
            $("#nav_image").stop().animate({opacity:1}, 250)
        }, function(){
             $("#nav_image").stop().animate({opacity:0}, 2500)
        });