一次对多个元素的宽度进行动画处理会导致：令人震惊、动画过载

Question

所以我有一个基于 ul 的导航菜单，我尝试在悬停后立即展开和折叠不同的菜单项（想象一下展开悬停的菜单选项卡，其余部分缩小）。菜单本身是动态的，因此使用 % 以及扩展和缩小菜单项的原因。

我的 jquery 知识相当薄弱，所以我对循环动画和菜单项在页面上碰撞的问题并不感到惊讶。有什么清理代码的技巧吗？

jQuery：

    $(document).ready(function(){  

        $(".navigation li").mouseover(function(){  
            $(this).stop().animate({width:'24%'},{queue:false, duration:600}).siblings().animate({'width':'4%'},400);
        });  

        $(".navigation li").mouseout(function(){  
            $(this).stop().animate({width:'5%'},{queue:false, duration:600}).siblings().animate({'width':'5%'},600);
        });  

    }); 

CSS：

/* Navigation Menu */

.navigation {
position:absolute;
top: 6.5em;
left: 4%;
width: 92%;
list-style-type:none;
}

.navigation li {
float: left;
width: 9.4%;
}

#one    {background:#666;}
#two    {background:#000;}
#three  {background:#666;}
#four   {background:#000;}
#five   {background:#666;}
#six    {background:#000;}
#seven  {background:#666;}
#eight  {background:#000;}
#nine   {background:#666;}
#ten    {background:#000;}

.navigation li a, .navigation li a:visited {
display: block;
height: 6em;
color:#FFF; 
text-decoration:none;
}

.navigation li a:hover, .navigation li a:focus {
color:#ff8300; 
text-decoration: underline;
}   

HTML：

    <ul class="navigation" >  

    <li id="one"><h3><a href="#">1</a></h3></li>
    <li id="two"><h3><a href="#">2</a></h3></li>
    <li id="three"><h3><a href="#">3</a></h3></li>
    <li id="four"><h3><a href="#">4</a></h3></li>
    <li id="five"><h3><a href="#">5</a></h3></li>
    <li id="six"><h3><a href="#">6</a></h3></li>
    <li id="seven"><h3><a href="#">7</a></h3></li>
    <li id="eight"><h3><a href="#">8</a></h3></li>
    <li id="nine"><h3><a href="#">9</a></h3></li>
    <li id="ten"><h3><a href="#">10</a></h3></li>

</ul>    

Answer 1

我对脚本做了一些修改。看看是否有帮助。

http://jsfiddle.net/bGUxX/