jquery prevent unwanted animation

Question

I have a list of of 10 icons that make up a menu. By default, the first icon will be bigger than the others to show that it is active. When the user hovers over another icon, the first icon will shrink and the other will grow and if they hover out, the first icon will return to its big (active) state again.

The problem is, if you quickly hover the other icons, the first will attempt to grow and thus cause it to look like it's shaking. Is there a way to stop this from happening? Here is a test page I set up: 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

Two suggestions come to mind...

1) eliminate the event gaps between the icons by binding hover() to the containing "li" elements instead of the "img" elements directly. Those 15px of padding between icons might be what's causing your problem.

2) If that doesn't work, perhaps you could add a brief time delay to the first icon re-expanding with setTimeout. That way you'd give yourself some breathing room while switching between icons.

Edit:

It just occurred to me that a more foolproof solution to this problem is to re-expand the first icon only when the cursor leaves the entire menu area. You could do this simply by changing the containing "ul" block to something like

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

Then you can change your code to look like this:

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