开发者

animating width of multiple elements at once results in: shocker, animation overload

so i have an ul-based navigation menu where i have attempted to expand and collapse different menu items at once after hover (think expand the hovered menu tab and the rest shrink). the menu itself is dynamic, hence the use of %'s and the reason for expanding and shrinking menu items.

my jquery knowledge is pretty weak, so i wasn't surprised that i would have issues with looping animations and menu items bumping down the page. any tips to clean up the code?

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%;
widt开发者_开发百科h: 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>    


I've modified the script a bit. See if it helps.

http://jsfiddle.net/bGUxX/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜