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）通过将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); });

jquery防止不需要的动画

1 个答案: