effet génant sur menu

Version imprimable

Bonjour,
débutant dans l'utilisation de jQuery, j'ai souhaité que chaque élément de mon menu change de couleur et se décale sur la droite (c'est un menu vertical) au passage de la souris avant de revenir a gauche lorsque la souris n'est plus sur l'élément.

Je ne suis pas certain de la propreté de mon code, toujours est-il que je rencontre un problème puisque si je survole tous les éléments d'un coup pendant quelques secondes puis que j'enlève la souris, l'animation rattrape son retard et continue toute seule jusqu'à avoir réaliser autant d'animations que de passages de souris.

Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $('.menuItem').hover( function() { if ($(this).hasClass('actif')) return false; //pour ne pas faire l'animation sur le lien de la page active $(this).css('color','#0078c4'); $(this).animate({ 'marginLeft': '+=10px', }, 500 ); }, function() { if ($(this).hasClass('actif')) return false; $(this).css('color','#a6a6a6'); $(this).animate({ 'marginLeft': '-=10px', }, 500 ); } );
Si quelqu'un peut m'aider, je l'en remercie d'avance !

Bonsoir

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// avec hover() les effets d'accordéon sont monnaie courante
// voir stop() et delay() dans la documentation
// il existe déjà plusieurs exemples de code sur le forum
$('.menuItem').hover(
	function() {
		var obj = $(this);
 
		if (obj.hasClass('actif')){
			return false; //pour ne pas faire l'animation sur le lien de la page active
		}
 
		obj.css('color','#0078c4');
 
  		obj.stop(true, true).animate({'marginLeft': '+=10px'}, 500);
	},
	function() {
		var obj = $(this);
 
		if (obj.hasClass('actif')){
			return false;
		}
 
		obj.css('color','#a6a6a6');
 
		obj.stop(true, true).animate({'marginLeft': '-=10px'}, 500);
  	}
);

26/07/2010, 15h29
NissqR

c'est parfait merci beaucoup ! :D