mouseouver et mouseout

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:

---

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:

---

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

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

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

Code:

---

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);     });   });

---