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重新展开。这样你就可以在切换图标时给自己一些喘息的空间。

编辑：

它只是发生，我认为一个更简单的解决这个问题，只有当光标离开整个菜单区域重新展开第一个图标。你可以简单地通过改变含有“UL”块类似

<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); 
    });