jquery navigation

Question

Je crée une navigation simple pour une page de destination de site. Il dirige l'utilisateur vers l'un des deux côtés de l'entreprise du client et consiste essentiellement à diviser l'écran en deux lorsque vous passez d'un côté à l'autre.

Mon code:

HTML

<div id="homeNav"> 
<a href="retail.html" id="retailNav">Retail</a> 
<a href="residential.html" id="residentialNav">Retail</a> 
<div id="retailHalf"></div> 
<div id="residentialFull"></div> 
<div id="retailFull"></div> 

JQuery

$('#retailNav').bind({ 
mouseenter: function() { 
    $('#residentialFull').fadeOut('slow'); 
}, 
mouseleave: function() { 
    $('#residentialFull').fadeIn('slow'); 
} 
}); 
$('#residentialNav').bind({ 
mouseenter: function() { 
    $('#retailHalf').fadeOut('slow'); 
}, 
mouseleave: function() { 
    $('#retailHalf').fadeIn('slow'); 
} 
}); 

Cela fonctionne bien mon problème est que si vous déplacez le curseur à gauche et à droite sur les deux moitiés rapidement l'animation est coincée dans une boucle. J'ai posté un exemple ici http://jsfiddle.net/4rUAT/

Comment puis-je arrêter cet effet indésirable? Merci d'avance.

Answer 1

Vous devez soit appeler la méthode .stop() ou vous devez vérifier le sélecteur :animated pseudo.

$('#retailHalf').stop(true,true).fadeOut('slow'); 

ou

$('#retailHalf:not(:animated)').fadeOut('slow'); 

Paramètres de .stop() indiquer si oui ou non le fx queue devrait être effacé et si oui ou non l'animation actuelle devrait instantiously sauter à la fin.

Réf .: .stop(), :animated

Answer 2

Ajouter un .stop() juste avant vos méthodes fadeIn et fadeOut, comme ça

$("#retailHalf").stop().fadeIn('slow'); 

Les méthodes stop() assurez-vous que toute l'animation est arrété avant inséré une nouvelle animation dans la file d'attente pour cet élément .

http://api.jquery.com/stop/