Animation au passage de la souris

**eddynamique** · 11/02/2010, 12h40

Bonjour,

J'aimerais faire une barre de navigation avec un petit effet (grossissement du texte) lorsque la souris passe sur un des liens. J'arrive presque à faire ce que je veux avec la fonction 'animate' mais parfois l'animation se répète plusieurs fois avant de se fixer. Par exemple je mets la souris sur un lien du menu, le texte grossit, reviens a sa taille normale, puis grossit de nouveau, au lieu de grossir une fois tout simplement. Je ne sais pas si c'est très clair... Je vous mets le code JS :

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
$("#divnews").mouseover(function(){
 
		  $(this).animate({ 
			fontSize: "18px"
		  }, 300 );
 
});
 
$("#divnews").mouseout(function(){
 
		  $(this).animate({ 
			fontSize: "16px"
		  }, 100 );
 
});

Si quelqu'un peut éclairer ma lanterne, ce serait sympa..
Merci !

**pop_up** · 11/02/2010, 13h51

J'ai essayé ce code, ça a l'air de fonctionner.

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<!doctype html>
<html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        $("#divnews").mouseover(function(){
            $("#divnews").animate({
                fontSize: "3em", 
            }, 300 );
 
        });
 
        $("#divnews").mouseout(function(){
 
        $(this).animate({
        fontSize: "1em"
        }, 100 );
 
        });
    });
  </script>
 
  <style>
 
  div { 
    background-color:#bca; 
    width:100px; 
    border:1px solid green;
  }
 
  </style>
  </head>
  <body>
 
  <div id="divnews">Hello!</div>
  </body>
  </html>

Si c'est pas le cas chez toi, met le code complet pour qu'on puisse tester exactement ton cas.

**Bovino** · 11/02/2010, 19h43

Ce n'est pas directement lié au sujet, mais plutôt que mouseover et mouseout, on peut avantageusement utiliser l'événement jQuery .hover() qui prend en paramètres le code à exécuter lors du mouseover et celui du mouseout.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$("#divnews").hover(
    function(){
        $("#divnews").animate({
            fontSize: "3em", 
        }, 300 )
    },
    function(){
        $(this).animate({
            fontSize: "1em"
        }, 100 );
    }
);

**danielhagnoul** · 11/02/2010, 22h06

Envoyé par eddynamique

... mais parfois l'animation se répète plusieurs fois avant de se fixer.

Ce problème est du a mouseover, hover simplifie l'écriture, mais n'améliore rien, car il utilise mouseover en interne.

On peut remplacer mouseover par l'événement mouseenter et mouseout par mouseleave.

Si l'utilisateur passe son temps à promener le pointeur sur la zone à animer le problème est moindre avec mouseenter mais il existe toujours.

Voir la démo à la fin de http://api.jquery.com/mouseover/

**boutmos** · 12/02/2010, 12h31

C'est du au fait que JQuery empile tes evenements et les execute donc X fois les uns apres les autres si tu fais X passages sur ton lien. Essaies ceci :

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
$("#divnews").mouseover(function(){
				  
		  $(this).stop().animate({ 
			fontSize: "18px"
		  }, 300 );
  
});
		
$("#divnews").mouseout(function(){
				  
		  $(this).stop().animate({ 
			fontSize: "16px"
		  }, 100 );
  
});

**eddynamique** · 22/02/2010, 04h55

Merci pour vos réponses. J'ai résolu mon problème en remplaçant "mouseover" et "mouseout" par "mouseenter" et "mouseleave". Mais j'aimerais savoir quelle est la différence entre $("#divnews").mouseenter() et $("#divnews").stop().mouseenter(), car je ne vois pas de différence.

Merci

**danielhagnoul** · 27/02/2010, 21h56

Bonsoir.

stop() : http://api.jquery.com/stop/

Sert à arrêter l'animation en cours, avis personnel : manipulation délicate et il ne sert à rien dans l'exemple donné.

Animation au passage de la souris

jQuery

Discussions similaires

Partager

Partager