Discussion :

[Invité]

Bonjour.

Il y a quelque chose que je ne m'explique pas avec le code ci-dessous: lorsque mon pointer survole la div#mouse, la div#pop s'affiche. Mais lorsque, mon pointer étant en train de survoler #mouse, il vient à survoler le span à l'intérieur, les deux événements liés à #mouse se répètent: autrement dit #pop disparait et s'affiche à nouveau. Pourtant, je suis toujours en train de survoler #mouse.

Comment éviter ce problème, tout en conservant #mouse comme élément déclencheur des événements ?

Merci.

Code :

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

1
2
3
4
5
6
 
<div id="mouse" style="width: 200px; background: yellow; text-align: center; height: 100px;">
	<span style="background: white;">pointez ici</span>
</div>
 
<div id="pop" style="opacity: 0;">POP</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var mouse = document.getElementById('mouse'),
	pop = document.getElementById('pop');
 
mouse.addEventListener('mouseover', function() {
	$('#pop').animate({opacity:'1'},'slow');
}, false);
mouse.addEventListener('mouseout', function() {
	$('#pop').animate({opacity:'0'},'fast');
}, false);

[Shikiryu]

Comme j'ai l'impression que tu utilises jQuery, tu peux utiliser l'évènement "mouseenter" et "mouseleave"

Code :

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

1
2
3
4
5
6
$('#mouse').mouseenter(function(){
    $('#pop').animate({opacity:'1'},'slow');
});
$('#mouse').mouseleave(function(){
    $('#pop').animate({opacity:'0'},'fast');
});

démo : http://jsfiddle.net/phNua/

[Macmillenium]

Ou alors:

Code javascript :

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

1
2
3
4
5
6
 
$("#mouse").hover(function() {
    $('#pop').animate({opacity:'1'},'slow');
}, function() {
    $('#pop').animate({opacity:'0'},'fast');
});

[Invité]

Bonjour.

Merci pour cette réponse.

Il est donc impossible d'utiliser DOM-2 (dans mon exemple: un "écouteur" d'événement) avec jQuery ?

Cela m'arrangerait de conserver cette gestion d'événement.

Ou alors, existe-t-il une fonction javascript (en-dehors de tout framework ou librairie type jQuery) qui permette d'animer le changement de valeur de l'attribut CSS opacity ?

Mais d'ailleurs, est-ce vraiment l'utilisation de jQuery qui pose problème dans mon exemple ?

Merci.

[Shikiryu]

.mouseenter, .mouseleave et .hover (qui est un raccourci des 2) sont des events listener : http://api.jquery.com/category/events/mouse-events/

De ce fait, tu ne perds pas cette gestion.

Le code fourni fonctionne parfaitement.

Par contre, si par exemple, tu crées les éléments via Javascript, il te faudra alors utiliser "live()" ou "delegate()"

Pour l'animation par opacité, tu as les fonctions associées : http://api.jquery.com/category/effects/fading/

Enfin, si tu souhaites rester avec animate(), je te conseille l'utilisation de dequeue() (qui permet de ne pas avoir une animation répétée x fois parce que l'utilisateur a fait les évènements trop rapidement)
$('#test').dequeue().animate({opacity:'1'},'slow');

[Invité]

Shikiryu, tu es merveilleux, tu anticipes mes questions ! ^^(pour dequeue)

Je ne voulais pas dire que le code de Macmillenium ne fonctionne pas. Au contraire, je l'ai testé, il fonctionne parfaitement.

Quelle serait l'utilité de live et delegate dans mon cas ?

Merci.

[Shikiryu]

Le code de Macmillenium est un raccourci du mien comme tu peux le voir dans la documentation ( http://api.jquery.com/hover/ )

Live permet la gestion d'évènement sur des éléments non présents dans le DOM au chargement de la page (ou d'éléments supprimés/réinséré/etc) Plus d'infos dans la doc : http://api.jquery.com/live/