我有这个 HTML 代码:
<ul class="menu">
<li>Home <span class="icon home"></span><div class="clear"></div></li>
<li class="sub">Projects <span class="icon project"></span>
<div class="clear"></div>
<ul class="sub-menu">
<li>Mfrsht.com</li>
<li>Mawsuaty.com</li>
<li>Dzlng.com</li>
<li>Money(Ctrl)</li>
</ul>
</li>
<li>Ideas <span class="icon idea"></span><div class="clear"></div></li>
<li>Services <span class="icon service"></span><div class="clear"></div></li>
<li>About us <span class="icon about"></span><div class="clear"></div></li>
<li>Contact <span class="icon contact"></span><div class="clear"></div></li>
</ul>
以及这段 Javascript 代码:
$(".menu > li").not(".menu > li.sub").css( {backgroundPosition: "0px 0px", height: "30px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-167px 0px)", height: "36px"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0px 0px)", height: "30px"}, {duration:200, complete:function(){ $(this).css({backgroundPosition: "0px 0px"})
}})
})
$(".menu > li.sub").css( {backgroundPosition: "0px 0px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-167px 0px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0px 0px)"}, {duration:200, complete:function(){ $(this).css({backgroundPosition: "0px 0px"})
}})
})
$(".sub").hover(function() {
$(this).animate({height: "150px"}, "slow", "", function () {
$(this).children("ul.sub-menu").slideDown("slow");
});
}, function() {
$(this).animate({height: "30px"}, "slow");
$(this).children("ul.sub-menu").slideUp("slow");
});
菜单工作正常,但有时我发现它滞后或有一些迟到,所以我想改进它并使其更好。
注意:我正在使用背景位置插件。
有什么建议吗?还是你觉得这样很好,不需要修改?
最佳答案
需要考虑的几件事:
- 使用 mouseenter/mouseleave 而不是 mouseover/mouseout 在必要时实际触发处理程序(因为您不关心 muse 是否在菜单项区域内移动光标 - 只关心哪个项目光标进入和离开)。
- 在事件处理程序中运行新动画之前使用
.stop(true)
。您已经在几个地方这样做了,但是您错过了一些地方(并且您没有清除动画队列)。尝试在整个菜单上随机移动光标,然后停下来观察困惑。事件处理程序在这里或那里触发,一些项目正在“悬停”,一些项目正在显示子菜单,只是在一秒钟后隐藏。通过将true
传递给 stop 函数,您可以告诉 jQuery 清除匹配对象的动画队列。 您还可以考虑使用.stop()
的第二个参数,这将告诉 jQuery 继续并设置对象在完成整个动画后所处的状态。然而,这(传递第二个参数)取决于您如何调整代码,所以不要只是这样做 - 检查这里是否有理想的效果。
关于javascript - 菜单性能问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12132794/