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设置为某个设置宽度来实现，然后使用{{ 1}}为jQuery和li上的父mouseover的宽度设置动画。

mouseout

当我设置宽度或通过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); });。

{{1}}

updated fiddle显示效果非常好。

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

1 个答案: