jquery - 扩展列表

Question

我花了很多时间玩和寻找答案，但没有快乐!

我有一个列表，当我将鼠标悬停在它上面时，我希望列表元素在宽度上扩展 - 我有这个工作，但是当鼠标离开列表时，我希望列表元素返回到它们的原始大小(这不是固定尺寸)。

CSS:

#navigation ul {
position: absolute;
right: 0;
bottom: 10px;
height: 30px;
list-style: none;
}

#navigation ul li {
display: inline-block;
margin-right: 20px;
text-transform: uppercase;
color: #FFF;
font-size: 12px;
height: 30px;
line-height: 30px;
text-align: left;
list-style: none;
background: #C00;
}

HTML:

<ul id="nav">

    <li>about us</li>
    <li>news</li>
    <li>services</li>
    <li>area profiles</li>
    <li>book a valuation</li>
    <li>testimonials</li>
    <li>contact</li>

</ul>

JQuery

 $('#nav li').each(function() {
     $.data(this, 'width', $(this).width());
 });

$('#nav').hover(function() {  
    $('#nav li').stop().animate({width:"150px"});
},
    function() {$('#nav li').stop().animate({width: $(this).data('width') + "px"});
});

任何帮助都会很棒!!我正在尝试重新创建此菜单:http://teefouad.com/themes/truestory/

Answer 1

如果您需要支持的浏览器允许这样做，为什么不选择纯 CSS 解决方案呢？如果这不可能 - 无需在悬停前存储宽度 - 只需将其设置为自动即可。这是一个纯 CSS 解决方案，它远非最佳，因为它使用了最小宽度，但仍然 - 它应该比 jQuery 解决方案更好。

#nav {
  list-style: none;
}
#nav li {
  text-align: center;
  min-width: 0;
  display: inline-block;
  background: red;
  margin: 0 0 1px 0;
  padding: 5px;
  transition: min-width 0.5s;
}
#nav li:hover {
  min-width: 150px;
}

<ul id="nav">
  <li>about us</li>
  <li>news</li>
  <li>services</li>
  <li>area profiles</li>
  <li>book a valuation</li>
  <li>testimonials</li>
  <li>contact</li>
</ul>