Mouseover & mouseout pour animation

**charade** · 15/09/2011, 11h43

Bonjour,

J'ai un menu sur lequel je souhaite animer au survol des icônes.
Parce qu'un exemple vaut mieux qu'un long discours, voilà mon test :
http://alpha.charade-concept.fr/test/

Même si c'est surement pas la meilleure méthode, mon animation marche a peu près correctement, mais j'ai un problème quand je survole les sous-menus déroulants. L'icône se met à bouger de bas en haut, sans arrêt.

J'aimerais que l'icone ne s'anime qu'une seule fois quand on survole une rubrique. J'ai essayé des stop(), mais rien de bien concluant.

Une piste ?

Voilà mon code javascript utilisé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
	$(function(){		
		$("#nav li").mouseover(function() {
			var ico = $(this).attr('rel');
			// $('#menu_icones).stop();
			if ($('#menu_icones #'+ico).hasClass('actif') == false){
				$('#menu_icones #'+ico).animate({
				  top: '-50'
				}, 200, function() {
					// Animation complete.
				});
			}
		}).mouseout(function(){
			var ico = $(this).attr('rel');
			if ($('#menu_icones #'+ico).hasClass('actif') == false){
				$('#menu_icones #'+ico).animate({
				  top: '-35'
				}, 200, function() {
					// Animation complete.
				});
			}
		});
 
     });