菜单性能问题

Menu performance issue

本文关键字：问题 性能 菜单      更新时间：2023-09-26

我有这个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");    
        });

菜单运行良好，但有时我发现它滞后或有一些延迟，所以我想改进它，让它变得更好。

注意：我使用的是后台位置插件。

演示

有什么建议吗？还是你认为这很好，不需要修改？

需要考虑的几件事：

  1. 使用mouseenter/mouseleve而不是mouseover/mouseout在必要时实际启动处理程序（因为您不关心muse是否在菜单项的区域内移动光标，只关心光标进入和离开了哪个项）
  2. 在事件处理程序中运行新动画之前，请使用.stop(true)。你已经在几个地方做了，但你错过了一些地方（而且你没有清除动画队列）。试着在整个菜单上随意移动光标，然后停下来观察混乱。事件处理程序到处启动，有些项目"悬停"，有些项目显示子菜单，只是为了在一秒钟后隐藏。通过传递true to stop函数，您告诉jQuery清除匹配对象的动画队列。您还可以考虑为.stop()使用第二个参数，它将告诉jQuery继续并设置对象在完成整个动画后的状态。然而，这（传递第二个参数）将取决于如何调整代码，所以不要只是这样做——在这里检查这是否是一个理想的效果
相关文章：