jQueryでapple風のナビゲーションを作りたかったんですが、うまくいきません。

基本的には、動くのですがmouseoverする回数分動いて止まらなくなります。
:animatedは入れてみたら動かなくなったりして、あまり使い方が解らないです。
どなたか教えて頂けないでしょうか?
よろしくお願いします。
width="100px"の<li>の中にwidth="150px"の<a>があり、mouseoverで<li>がwidth="150px"になり、見えなかった<a>の部分が見えるという鋳掛けです。
/*js*/

<script type="text/javascript">
$(function(){
$("#navi li").mouseover(function(){
$(this).animate({width:"150px"},"slow","swing");
}).mouseout(function(){
$(this).animate({width:"100px"},"slow","swing");
});
});
</script>
/*html*/

<ul id="navi">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

/*css*/

#navi{width:750px;}
#navi a{background: url("?") ; width:150px; height:93px; display:block;}
#navi li{background: url("?") ; width:100px; height:93px; overflow:hidden; display:block; float:left;}

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/08/15 17:25:24
  • 終了:2011/08/22 17:30:03

回答(0件)

回答はまだありません

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません