анимация ширины нескольких элементов одновременно приводит к: шокеру, перегрузке анимации - PullRequest
Новая
       17

анимация ширины нескольких элементов одновременно приводит к: шокеру, перегрузке анимации

1 голос
/ 20 мая 2011

, поэтому у меня есть навигационное меню на основе 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>

1 Ответ

0 голосов
/ 20 мая 2011

Я немного изменил скрипт. Посмотрите, поможет ли это.

http://jsfiddle.net/bGUxX/

...