jQuery 弹性菜单

Question

我尝试使用 jQuery 创建的弹性菜单有问题。它在 Safari 中看起来（几乎）不错（当鼠标悬停时，菜单右侧有一点晃动）。但在 Chrome 和 Firefox 中，最后一个菜单（联系人）有时会跳到下一行。我对 jQuery 很陌生，我无法看到问题...

您可以在this fiddle 中看到它的实际效果

这是我的代码：

jQuery

$(document).ready(function(){


var bouton = $('#menu li a'),
vitesse = 300;

bouton.hover(function(){
    var leParent = $(this).parent();
    leParent.stop().animate({ width: "40%" }, vitesse )
    .siblings().stop().animate({ width: "20%" }, vitesse );
    });

bouton.mouseout(function(){
    var leParent = $(this).parent();
    leParent.stop().animate({ width: "25%" }, vitesse )
    .siblings().stop().animate({ width: "25%" }, vitesse );
    });


});

HTML

<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>

CSS

html, body{margin:0;
padding:0;}


#menu{
padding:0;
width:80%;
margin:10px auto;
list-style-type:none;
}

#menu li{
margin:0;
padding:0;
width:25%;
float:left;
text-align:center;
background-color:#C03;
}


#menu li a{
border-left:1px solid white;
padding:10px 0;
color:#FFF;
text-decoration:none;
display:block;
}

Answer 1

您正在为浮动元素设置动画。当不适合您的容器时，它们会显示在下方。

您应该在制作动画时留出一些空间。

这样做：

#menu {
     text-align: center;
}

使其居中。

删除：

#menu li {
    float: left;
}

并添加：

#menu li {
    display: inline-block;
}

并将元素的宽度更改为 24%，将缩小后的按钮大小更改为 19%。

最后确保删除 li 元素之间的所有空格。

<ul id="menu">
    <li><a href="#">Accueil</a></li><!--
    --><li><a href="#">Produits</a></li><!--
    --><li><a href="#">Portfolio</a></li><!--
    --><li><a href="#">Contact</a></li>
</ul>

现在应该可以了。

http://jsfiddle.net/jRMZM/2/

您始终可以在窗口调整大小事件处理程序中自己计算百分比，并确保在百分比计算中执行 Math.floor()。

编辑： http://jsfiddle.net/zWCf8/3/