title: jQuery animation ends prematurely
body: <p>I have a little problem with a jQuery animation.</p>
  
  <p>I have the following HTML:</p>
  
  <pre><code>&lt;div id="menu"&gt;
      &lt;a id="menu-about" href="/"&gt;A riguardo...&lt;/a&gt;&lt;br /&gt;
      &lt;a id="menu-ask" href="/"&gt;Fammi una domanda&lt;/a&gt;&lt;br /&gt;
      &lt;a id="menu-archive" href="/"&gt;Sfoglia l'archivio&lt;/a&gt;&lt;br /&gt;
      &lt;a id="menu-vcard" href="/"&gt;La mia vCard&lt;/a&gt;&lt;br /&gt;
      &lt;a id="menu-lifestream" href="/"&gt;Il mio lifestream&lt;/a&gt;&lt;br /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Styled as:</p>
  
  <pre><code>div#menu {
      position: fixed;
      bottom: 0;
      left: 100%;
      padding: 0;
  }
  
  div#menu a {
      display: inline-block;
      height: 20px;
      margin: 0 0 10px -42px;
      padding: 6px 0 6px 42px;
      line-height: 20px;
      font: bold 20px "Arial", Helvetica, sans-serif;
      color: #263F51;
      text-shadow: 0 -1px 0 #213441, 0 1px 1px #668EAA;
      text-align: left;
      text-transform: uppercase;
  }
  
  div#menu a:hover {
      text-decoration: none;
  }
  
  div#menu a#menu-about { background: url(../img/layout/bg-menu-about.png) no-repeat left center; }
  div#menu a#menu-ask { background: url(../img/layout/bg-menu-ask.png) no-repeat left center; }
  div#menu a#menu-archive { background: url(../img/layout/bg-menu-archive.png) no-repeat left center; }
  div#menu a#menu-vcard { background: url(../img/layout/bg-menu-vcard.png) no-repeat left center; }
  div#menu a#menu-lifestream { background: url(../img/layout/bg-menu-lifestream.png) no-repeat left center; }
  </code></pre>
  
  <p>The animation is the following:</p>
  
  <pre><code>$(function start_menu_effect() {
      $("div#menu a").hover(function (){
          $(this).stop().animate({'marginLeft': '-' + ($(this).width() + 52) + 'px'}, 400);
      },
      function (){
          $(this).stop().animate({'marginLeft': '-42px'}, 400);
      });
  });
  </code></pre>
  
  <p>The problem is that the animation ends prematurely. The animate function stops before reaching the full margin. Furthermore, the animation can be completed de-hovering and re-hovering the mouse before the menu returns to the original position...</p>
  
  <p><strong>EDIT - the problem seems to be related to the width, that isn't correct. I create a fiddle to demonstrate the problem:</strong> <a href="http://jsfiddle.net/cyrusza/fJCyn/" rel="nofollow">http://jsfiddle.net/cyrusza/fJCyn/</a></p>
  
  <p>Any hints?</p>