一次对多个元素的动画宽度会导致：令人震惊的动画超载

问题描述

|| 因此，我有一个基于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%\'},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>    

    

解决方法

我对脚本做了一些修改。看看是否有帮助。 http://jsfiddle.net/bGUxX/