Comment arrêter une animation "mid-stream" et l'inverser?

Question

Voici mon HTML:

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

et mon jQuery:

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

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

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

Le problème est que si la souris est rentré dans la barre de navigation (qui est plus grande dans la région que l'image de navigation à l'intérieur) avant que les 2500ms ne soient levés, l'animation resterait. J'ai essayé d'ajouter la fonction stop() mais elle ne semblait pas s'appliquer ou gelerait le script entier en fonction de mon timing. Je sais que je dois manquer quelque chose de fondamental ...

Answer 1

Je ne suis pas sûr de quelqu'un d'autre, mais j'ai toujours eu plus de chance d'utiliser .animate() dans une situation où l'effet pourrait devoir être arrêté et inversé.

Exemple: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: Comme l'a noté Craver.hover() @ Nick est une alternative pratique à mouseenter et mouseleave, car il accepte deux fonctions représentant les deux événements.

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) 
     });