Problem with animate({width:'toggle'}); on mouseover/mouseleave...

Problem with animate({width:'toggle'}); on mouseover/mouseleave...

Hello everyone,


I'm actually working on my future new website (I'm graphic designer), which is almost ready. However, there is some kind of bug I can't solve : I want to, at articles mouseover, that a div, with some related informations, slides horizontally.

As you can see on my testing website, on article's over, the div slides normally, but if you go to the right-bottom corner (the "+" square), the animation "blows". And worse, if you go on the "just slided" div...

I checked my codes (html, css, js), but can't see where is the problem. I'm beginning in jQuery, so... If someone could help, it would fantastic !

Here is my js :
  1. $(document).ready(function(){
  2. // Affichage infos articles
  3.     $('section#content article hgroup').hide();
  4.     $('article a').mouseover(function(){
  5.         $(this).find('hgroup').animate({width:'toggle'});
  6.     });
  7.     $('article a').mouseleave(function(){
  8.         $(this).find('hgroup').animate({width:'toggle'});
  9.     });
  10. });

And my html :
  1. <article id="post-206">
  2. <a href="http://www.soykje.com/testeur/logo-edd" title="Cliquez pour voir plus de détails">
  3.       <header class="entry-header">
  4.             <p class="more">+</p>
  5.             <hgroup>
  6.                   <h1 class="entry-title">Réseau EDD</h1>
  7.                   <h2>Conception & réalisation d'un logo associatif</h2>
  8.             </hgroup>
  9.       </header>
  10.       <div class="entry-content">
  11.             <img src="http://www.soykje.com/testeur/wp-content/uploads/2102/11/EDD-11.jpg" alt=""/>
  12.       </div>
  13. </a>
  14. </article>

Thanks a lot !