jquery - スパンを正しい位置にアニメートする方法は?

Question

重複の可能性:
正しい位置を再計算する方法

私はこの効果を達成しようとしています: menu にカーソルを合わせると、クラス"problem"のスパンがマウスに追従し、動的に展開されます (ホバーされた li タグと同じ幅になります)。スパンの幅は正常に機能していますが、適切な計算方法がわからないため、位置がめちゃくちゃです。
問題を確認するには、メニューにカーソルを合わせてみてください。
FIDDLE HERE
誰かがこの問題を解決する方法を知っているか、正しい方向に向けてくれますか?

  $(document).ready(function(){
    $('.menu ul li').hover(function(){
        var index=$(this).index();
        var width=$(this).outerWidth();        
        $('.problem').stop().animate({'marginLeft':135*index+195,'width':width},1000);     
    });
});

Answer 1

うーん、フロートとその下のテキストを適切に取得できませんでした。左に浮いliているように見えますが、親の幅を超えています。したがって、最後のメニュー項目 ( li) が自動的に表示されます。font-size を小さくするか、このようなことをしなければなりません。

ul li{
    float:left;
    width : 120px;
    overflow : hidden;
    white-space : nowrap;
    margin-left:10px;
}

これを参照してください。

Answer 2

これは私が思うにうまくいくでしょう：

http://jsfiddle.net/w3DrE/16/