Problème animation jQuery hover stop animation

Le framework javascript jQuery permet, comme son slogan l'indique, d'écrire moins et faire plus (write less, do more), mais quelques bug sont cependant présent. Le bug que nous allons traiter dans ce billet concerne en faite les animation de type menu déroulant ou plus généralement les animations qui peuvent être amenées à être stoppées, pour retourner à leur position d'origine.

Voici un code standard pour un menu déroulant (nous faisons abstraction de la couche CSS pour nous focaliser sur le mécanisme jQuery).

Le menu html

<ul id="mon-menu">
	<li>
		<a href="/lien1.html">Lien 1</a>
		<ul>
			<li>
				<a href="/sous-lien1.html">Sous Lien 1</a>
			</li>
			<li>
				<a href="/sous-lien2.html">Sous Lien 2</a>
			</li>
			<li>
				<a href="/sous-lien3.html">Sous Lien 3</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="/lien2.html">Lien 2</a>
	</li>
	<li>
		<a href="/lien3.html">Lien 3</a>
	</li>
	<li>
		<a href="/lien4.html">Lien 4</a>
	</li>
</ul>

Le bout de code permettant de montrer les sous menu au survol de la souris.

$(document).ready(function(){
	//on selectionne les enfants directes li du menu
	$("#mon-menu > li").hover(
		function(){
			$(this).find("ul").show();
		},
		function(){
			$(this).find("ul").hide();
		}
	);
});

Ce code minimaliste permet de tout simplement afficher les sous-menu (veuillez donc à les cacher par avance avec par exemple une propriété css display:none).
Nous verrons donc au survol d'un lien primaire, les sous liens.

Dans ce cas précis, il n'y a pas de problème puisque l'affichage et la disparition des sous menus sont instantanés.

Prenons maintenant le même exemple, mais en fournissant un paramètre de type "slow" aux deux fonctions, tel que:

$(document).ready(function(){
	//on selectionne les enfants directes li du menu
	$("#mon-menu > li").hover(
		function(){
			$(this).find("ul").show("slow");
		},
		function(){
			$(this).find("ul").hide("slow");
		}
	);
});

Maintenant le problème est présent. En effet, si vous survolé un nombre x de fois rapidement les liens primaires, vous allez voir que les sous menu vont se cacher et se montrer autant de fois. C'est un peu étrange de voir un menu bouger tout seul pendant une certaine durée sans même avoir à bouger la souris.

Pour y remédier introduisons la fonction stop().

Voici la signature de cette fonction: .stop( [ clearQueue ], [ jumpToEnd ] )
clearQueue(défaut: false) : booléen indiquant si l'on doit effacer toutes les animations en attente sur l'objet ciblé.
jumpToEnd(défaut: false) : booléen indiquant si l'animation en cours doit être forcé à atteindre sa position finale.

Ne vous pressez pas de suite à utiliser cette fonction !

En effet, de toute évidence, un simple appel à la fonction stop avec le paramètre clearQueue devrait permettre d'arrêter l'animation.

$(document).ready(function(){
	//on selectionne les enfants directes li du menu
	$("#mon-menu > li").hover(
		function(){
			$(this).find("ul").stop();
			$(this).find("ul").show();
		},
		function(){
			$(this).find("ul").hide();
		}
	);
});

Seulement nous découvrons là un nouveau bug. Si l'on réitère la manipulation précédente, c.a.d survoler rapidement les menus, au bout d'un moment le sous menu s'affiche à moitié ou plus du tout.

La solution viable que nous avons trouvée est de forcer l'animation e cours de se terminer en précisant le paramètre jumpToEnd à true.

Nous prenons aussi soin dans cette example de vider la file d'attente des animations afin de ne pas voir les sous menu s'agiter pendant un certain moment.

Voici le code jQuery que nous obtenons:

$(document).ready(function(){
	//on selectionne les enfants directes li du menu
	$("#mon-menu > li").hover(
		function(){
			$(this).find("ul").stop(true, true);
			$(this).find("ul").show();
		},
		function(){
			$(this).find("ul").hide();
		}
	);
});

Nous n'avons à ce jour pas trouver de solution viable pour arrêter l'animation au milieus sans avoir à forcer l'animation en cours à finir.