jQuery : animate(), queue() et dequeue() solution

Voilà le problème que je viens de rencontrer et que vous avez sûrement rencontré si vous faites un petit peu de jQuery : j’ai fait un <div></div> qui était un petit rectangle, et je voulais, que lorsque la souris entre dedans, il s’agrandisse, et lorsqu’elle en sort, il diminue.

Le problème (qui est la plupart du temps un avantage) avec jQuery, c’est que lorsqu’une animation commence, s’il y en a une autre pour le même élément, il la met dans une queue() (toute plaisanterie grivoise mise à part).
Donc, si, comme moi, vous voulez faire une animation assez lente, et que vous entrez et sortez rapidement avant la fin de l’animation, il va y avoir plein d’éléments qui vont aller à l’intérieur, et… même si vous éloignez la souris, les animations d’entrée-sortie vont continuer à jusqu’à ce que la queue soit vide ! …là aussi toute plaisanterie grivoise mise à part.

La solution est simple : il faut non seulement dire à l’élément concerné d’arrêter l’animation via stop(), mais aussi :

1. dire de supprimer tout ce qu’il y a dans la queue (premier paramètre = true)
2. dire de jouer immédiatement l’animation qui suit (premier paramètre = true)

Exemple de code qui fonctionne :

  $('tr')
    .mouseenter(function() {
      var id=$(this).attr('id').substring(3);
      var c=$(this).children('.principal').children('.texte');
      c.stop(true, true).animate({ height: '400px'}, 'slow');
    })  
    .mouseleave(function() {
      var c=$(this).children('.principal').children('.texte');
      c.stop(true, true).animate({ height: '89px'}, 'slow');
    });