jquery предотвратить нежелательную анимацию

Question

У меня есть список из 10 значков, составляющих меню. По умолчанию первый значок будет больше, чем другие, чтобы показать, что он активен. Когда пользователь нависает над другим значком, первый значок будет уменьшаться, а другой будет расти, а если они выйдут, первый значок снова вернется в свое большое (активное) состояние.

Проблема заключается в том, что если вы быстро наведете другие значки, первый попытается вырасти и, таким образом, будет выглядеть так, как будто это трясет. Есть ли способ остановить это? Вот тестовая страница, я настраивал: http://recoverstudio.com/icon_menu/

JQuery:

$("#icon_one").width(76).height(76).css({ 'top' : '-15px', 'left' : '-15px'}); 

$(".icon").hover(function(){ 
    $(this).stop().css({'z-index':10}).animate({top: -15, left: -15, height: 76, width: 76}, 75); 
    $("#icon_one").stop(true).animate({top: 0, left: 0, height: 45, width: 45}, 75); 
    }, 
function(){ 
    $(this).stop().css({'z-index':1}).animate({top: 0, left: 0, height: 45, width: 45}, 75); 
    $("#icon_one").stop(true).animate({top: -15, left: -15, height: 76, width: 76}, 75); 
    }); 

CSS:

img { 
    border: 0; 
} 

ul li { 
    float:left; 
    list-style:none; 
    padding: 0 15px 0 0; 
    height: 45px; 
    width: 45px; 
} 

ul li a img { 
    display: block; 
    height: 45px; 
    position: relative; 
    width: 45px; 
} 

HTML:

<ul> 
    <li><a href="#"><img src="icon_one.png" id="icon_one" class="icon" /></a></li> 
    <li><a href="#"><img src="icon_two.png" id="icon_two" class="icon" /></a></li> 
    <li><a href="#"><img src="icon_three.png" id="icon_three" class="icon" /></a></li> 
    <li><a href="#"><img src="icon_four.png" id="icon_four" class="icon" /></a></li> 
    <li><a href="#"><img src="icon_five.png" id="icon_five" class="icon" /></a></li> 
    <li><a href="#"><img src="icon_six.png" id="icon_six" class="icon" /></a></li> 
    <li><a href="#"><img src="icon_seven.png" id="icon_seven" class="icon" /></a></li> 
    <li><a href="#"><img src="icon_eight.png" id="icon_eight" class="icon" /></a></li> 
    <li><a href="#"><img src="icon_nine.png" id="icon_nine" class="icon" /></a></li> 
    <li><a href="#"><img src="icon_ten.png" id="icon_ten" class="icon" /></a></li> 
</ul> 

Answer 1

Два предложения приходят на ум ...

1) el имитировать промежутки событий между значками, привязывая hover() к содержащим элементам «li», а не непосредственно к элементам «img». Эти 15px отступов между значками могут быть причиной вашей проблемы.

2) Если это не сработает, возможно, вы можете добавить кратковременную задержку для повторного расширения первого значка с помощью setTimeout. Таким образом, вы сможете передохнуть в перерыве между значками.

Edit:

Это только мне пришло в голова, что более надежное решение этой проблемы заключается в восстановлении расширить первый значок только тогда, когда курсор покидает область всего меню. Вы можете сделать это, просто изменив содержащий блок «уль» к чему-то вроде

<ul id="menu"> 
    //your menu icon list 
</ul> 

Затем вы можете изменить свой код, чтобы выглядеть следующим образом:

$("#icon_one").width(76).height(76).css({ 'top' : '-15px', 'left' : '-15px'}); 

$(".icon").hover(function(){ 
    $(this).stop().css({'z-index':10}).animate({top: -15, left: -15, height: 76, width: 76}, 75); 
    $("#icon_one").stop(true).animate({top: 0, left: 0, height: 45, width: 45}, 75); 
    }, 
function(){ 
    $(this).stop().css({'z-index':1}).animate({top: 0, left: 0, height: 45, width: 45}, 75); 
    }); 


$("#menu").mouseleave(function(){ 
    $("#icon_one").stop(true).animate({top: -15, left: -15, height: 76, width: 76}, 75); 
    });