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;}