Discussion :

[pierrot10]

Bonjour a tous.
J'ai une construction de li qui contient des images.
Quand je passe ma souris sur les images j'aimerais que l'image disparait
Pourcela, j'ai fait ceci:

Code :

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

1
2
3
4
5
6
7
8
9
jquerydocument).ready(function(){
 
	$('li.hover').mouseover(
	  function(){
	    $(this).find('img').fadeOut(100);
 
	  });
 
});

ca marche.
Sauf que maintenant, j'aimerais que lorsque la souris sort, l'image réapparait, et là je bug.
j'ai donc ajouté ceci:

Code jquery :

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
 
$(document).ready(function(){
 
	$('li.hover').mouseover(
	  function(){
	    $(this).find('img').fadeOut(100);
 
	  });
 
  $('li.hover').mouseout(
	  function(){
	    $(this).find('img').fadeIn(100);
 
	  });
 
});

Ce qui se passe c'est que l'image cligotte 3-4 fois avant de disparaitre
Voici un exemple:
http://www.timotheegiorgis.ch/projets-architectes/

Par contre, j'ai constaté que si je laisse la souris sur le bord rose, l'image disparait correctement.

J'aimerais donc savoir comment modifier mon code, pour que l'image disparait d'un seul coup et réapparait ensuite à la sortie de la souris.

Merci

[utopman]

Salut,

essaye l'évènement mouseenter et mouseleave à la place. Il faut aussi qu'avant que ton fade comment, tu fasse un .stop() et un .dequeue() pour éviter les clignotements.

Cordialement

[pierrot10]

Super, je te remercie, ca va beaucoup mieux.
C'est bien comme ca qu'il fallait modifier?

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
 
$(document).ready(function(){
 
	$('li.hover').mouseenter(
	  function(){
	    $(this).find('img').stop().dequeue().fadeOut(700);
 
	  }).mouseleave(
	  function(){
	    $(this).find('img').fadeIn(200);
 
 
	});
 
});