jquery-ui - jQuery - 動かなくなったアニメーション

Question

アニメーション用の Javascript の長いスクリプトにちょっとうんざりしていて、jQuery を試すことにしましたが、最も単純なコードでさえ行き詰まっているようです。

---

CSS:

#menu {float: right; font: italic 16px/16px Verdana, Geneva, sans-serif;}
  ul#nav {list-style: none;}
  ul#nav li {float: left; padding-right: 10px;}
  ul#nav li a {color: white;}
  ul#subnav {float: right; list-style: none; padding: 0; display: none;}
  ul#subnav li {float: left; padding: 10px 5px; white-space: nowrap;}
  ul#subnav li a {color: white;}

脚本：

$(document).ready(function() { 
  $('.nav').hover(function() {
    $(this).find('#subnav').stop().animate({width:'toggle'},350);
  });
});

HTML:

<div id="menu">
  <ul id="nav">
    <li class="nav">
      <a href="#"><img src="images/icon-home.png" width="36" height="36"/></a>
      <ul id="subnav">
        <li><a href="#">Home</a></li>
      </ul>
    </li>
    <li class="nav">
      <a href="#"><img src="images/icon-signin.png" width="36" height="36"/></a>
      <ul id="subnav">
        <li><a href="#">Sign In</a></li>
      </ul>
    </li>
    <li class="nav">
      <a href="#"><img src="images/icon-register.png" width="36" height="36"/></a>
      <ul id="subnav">
        <li><a href="#">Create Account</a></li>
      </ul>
    </li>
    <li class="nav" style="padding-right: 0;">
      <a href="#"><img src="images/icon-mail.png" width="36" height="36"/></a>
      <ul id="subnav">
        <li style="padding-right: 0;"><a href="#">Contact Us</a></li>
      </ul>
    </li>
  </ul>
</div>

---

サンプルページはこちら: http://v1n-vampire.com/dev/jq-animation-stuck

ナビゲーションを左から右に移動し続け、次に左に戻ると、最終的にアニメーションが動かなくなります。これを解決するには？

Answer 1