Jquery 同时对多个元素的宽度设置动画会导致：震动、动画过载

因此，我有一个基于ul的导航菜单，我尝试在鼠标悬停思考后立即展开和折叠不同的菜单项，展开鼠标悬停的菜单选项卡，其余部分收缩。菜单本身是动态的，因此使用了%以及扩展和收缩菜单项的原因

我的jquery知识相当薄弱，因此我并不惊讶于在页面上循环动画和菜单项会出现问题。有没有清理代码的提示

jQuery：

CSS:

HTML:

---

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

谢谢kei，看起来好多了。我希望能有一种方法来调整收缩和扩张的速度，使它们同时发生，而不是像反弹一样的效果。有什么想法吗？

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

    }); 

/* 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;
}   

    <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>