Mouseover & mouseout pour animation
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:
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.
});
}
});
}); |
