Jquery 如何设置父元素'；要创建背景效果，请选择宽度？

我有一个菜单

ul

：

<ul>
    <li class="one"><a href="#">Link One</a></li>
    <li class="two"><a href="#">And Two</a></li>
    <li class="three"><a href="#">Then it's Three</a></li>
    <li class="four"><a href="#">Finally Four</a></li>
<ul>

当我只是设置宽度或通过css设置宽度时，效果很好，但幻灯片效果会导致奇怪的结果：

---

我的问题是：我需要改变什么才能让它正常工作，还是有更好的方法来完成它？我不一定介意背景图像法，但最好你能告诉我为什么它最好和/或为什么其他方法更差。

我发现我可以通过改变一些东西来达到这个效果。我现在在

a

上有一个

mouseenter

，而不是

a

上的

mouseeout

，我在

li

上把它改为

mouseleave

。我还将

a

设置为

位置：固定

$('a').mouseenter(function(){
    console.log('mouseenter');
    $(this).parent().stop().animate({
        width: 270
    }, 200);
});
$('li').mouseleave(function(){
    console.log('mouseleave');
    $(this).stop().animate({
        width: 0
    }, 200);
});

这表明它工作得很好。
我发现我可以通过改变一些东西来达到这个效果。我现在在
a
上有一个
mouseenter
，而不是
a
上的
mouseeout
，我在
li
上把它改为
mouseleave
。我还将
a
设置为
位置：固定

$('a').mouseenter(function(){
    console.log('mouseenter');
    $(this).parent().stop().animate({
        width: 270
    }, 200);
});
$('li').mouseleave(function(){
    console.log('mouseleave');
    $(this).stop().animate({
        width: 0
    }, 200);
});

结果表明它工作得很好