我应该如何为父元素的宽度设置动画以创建背景效果？

Question

我有菜单的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>

当我将鼠标悬停在锚点上方时，我希望背景从左侧滑入，并在再次将鼠标移开时向后滑出，同时文本的位置保持不变。 我可以使用背景图片轻松完成此工作，但我想我可以通过将li的宽度设置为0并将a设置为某个设置的宽度，然后使用jQuery动画父li的宽度来做到这一点。 mouseover和mouseout 。

$('a').mouseover(function(){
    $(this).parent().stop().animate({
        width: 270
    }, 200);
});
$('a').mouseout(function(){
    $(this).parent().stop().animate({
        width: 0
    }, 200);
});

当我只是设置宽度或通过CSS设置宽度时，它可以正常工作，但实际上幻灯片会产生奇怪的结果： http : //jsfiddle.net/LeonardChallis/D67dM/

我的问题是：为了使此工作正常进行，我需要更改什么？或者有更好的方法吗？ 我不必介意背景图像方法，但最好仅在您可以告诉我为什么它最好和/或其他方法为什么更差的情况下。

Answer 1

我发现我可以通过更改一些内容来实现此结果。 我现在有一个mouseenter的a ，并代替mouseout的a ，我把它改成一个mouseleave的li 。 我还设置了a向position: fixed; 。

$('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);
});

更新的小提琴显示它工作得很好。