菜單性能問題

我有這樣的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");  
     });

菜單工作正常，但有時我發現它滯後或有一些遲到，所以我想改善它並使其更好。

注意：我使用的是背景位置插件。

DEMO

有什麼建議？或者你認爲這很好，不需要修改它？

來源

2012-08-26 Saleh

夫婦的事情要考慮：

使用的mouseenter /鼠標離開，而不是鼠標懸停/鼠標移開真正得到處理燃煤必要時（因爲你不介意的繆斯菜單項的區域內移動光標 - 僅哪個項目光標進入和離開）。
在事件處理程序中運行新的動畫之前使用.stop(true)。你已經在幾個地方做過，但是你錯過了一些地方（並且你沒有清除動畫隊列）。嘗試在整個菜單中隨機移動光標，然後停下來觀看混亂。事件處理程序在這裏和那裏開火，有些項目「懸停」，有些項目顯示子菜單，稍後會隱藏。通過傳遞true來停止函數，你告訴jQuery清除匹配對象的動畫隊列。您可能還會考慮使用.stop()的第二個參數，這將使告訴 jQuery繼續前進，並設置完成整個動畫後對象的狀態。然而，（通過第二個參數）將取決於你如何調整你的代碼，所以不要這樣做 - 檢查這是否是一個理想的效果。

來源

2012-08-26 18:37:41 WTK

菜單性能問題

回答

相關問題