Bonjour à tous,

je coince sur un petit problème lors d'une animation dans un menu.

HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<div id="menu"><ul>
<li><a href="">a</a></li>
<li><a href="">b</a></li>
<li><a href="">c</a></li>
<li><a href="">d</a></li>
</ul></div>
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
16
$('div#menu ul li').mouseover(function() {
	$(this).animate({
    width: '200px',
    height: '300px'
  }, 1000, function() {
    // Animation complete.
  });
});
$('div#menu ul li').mouseout(function() {
	$(this).animate({
    width: '108px',
    height: '195px'
  }, 1000, function() {
    // Animation complete.
  });
});
Vous avez compris l'idée, je souhaite agrandir la taille des <li> au survol et leur faire retrouver leur petite taille lorsque la souris sort du <li>.

Mon problème : si je survol vite les <li>, la fonction mouseout est appelé lorsque l'animation mouseover est terminé.

La solution (mais comment ?) : exécuté la fonction mouseout dès que la souris sort du <li> et arrété l'exécution mouseover, mais je ne vois pas comment faire...

Merci