Fonction resize() et exécution de fonction [javascript - jquery]

Bonjour à tous,

Je suis en train d'intégrer un site responsive dont le menu contient une surcouche jquery pour l'animation selon la largeur de l'écran.

La structure de la fonction qui permet la gestion des deux résolutions est la suivante
- Détection de la largeur de la fenêtre.
- Si le menu principal est bien là
-Si la largeur est supérieure à 640 :
-Etat over du menu principal
-Callback après état over
-Si la largeur est inférieure ou égal à 640
-Etat over du menu principal
-Callback après état over

La fonction :

var mMenu = function() {

	var largeur = $j(window).width();

	if ($j("#menu-principal").length > 0) {
		if(largeur > 640) {
			console.log('supérieur à 640');
			$j("#menu-principal").hover(function(){
			console.log('hover : context > 640');
			},
			function(){
			 	console.log('exit : context > 640');
			});
		}

		else {
			console.log('inférieur ou égal à 640');
			$j("#menu-principal").hover(function(){
			 	console.log('hover : context <= 640');
			},
			function(){
			 	console.log('exit : context <= 640');
			});
		}
	}
};

La fonction est implémentée de cette façon :

$j(window).load(function(){

	mMenu();

	$j(window).resize(function() {
			mMenu();
	});
});

J’ai deux questions :

1. La fonction « resize » s’exécutant en permanence pendant le resize, qu’elle est selon-vous la meilleur façon de faire pour exécuter la fonction après le resize ?

2. Les logs indique que, après un resize, les conditions dans la fonction ne sont pas correctement exécuté :

// Après le chargement de la page : exécution normal
supérieur à 640
hover : context > 640
exit : context > 640
hover : context > 640
exit : context > 640

// Resize de la page
inférieur ou égal à 640

//Execution anormal
hover : context > 640
hover : context <= 640
exit : context > 640
exit : context <= 640

Par avance merci à tous pour vos avis et vos aides (précieuse)

Salut !

La méthode stop() est appelée avant le début de l'animation pour éviter des boucles répétées si la souris entre et sort rapidement du menu. Plus de précisions dans cet article :
http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

$j(window).load(function(){

	mMenu();

	$j(window).resize(function() {
                        stop();
			mMenu();
	});
});

Modifié par Virgule144 (04 Oct 2013 - 11:31)