jquery - 如何为跨度设置动画以正确位置？

Question

可能重复：
如何重新计算正确的位置

我一直在尝试实现这种效果：当我将鼠标悬停在 menu 上时，带有“问题”类的 span跟随我的鼠标并且它是动态扩展的（与悬停的 li 标签具有相同的宽度）。我的跨度的宽度工作正常，但它的位置搞砸了，因为我不知道如何进行正确的计算。
尝试将鼠标悬停在我的菜单上以查看问题。
在这里提琴
有人知道如何解决这个问题或指出我正确的方向吗？

  $(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）自动下降。您必须减小字体大小或执行类似的操作。

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

看到这个。

Answer 2

我认为这会更好：

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