메뉴 성능 문제

Question

나는이 HTML 코드가

$(".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

어떤 제안이? 아니면 이것을 좋게 수정해야 할 필요가 없다고 생각합니까? 사물의

Answer 1

커플 고려 : 실제로 핸들러를 얻는 대신에 마우스 오버 /로 마우스의

1. 사용 mouseenter /하는 MouseLeave이 필요한 경우 해고 (당신은 상관하지 않기 때문에 뮤즈는 메뉴 항목의 영역 내에서 커서를 이동하는 경우 - 만 어떤 항목 커서가 입력되고 비 웠는지).
2. 이벤트 처리기에서 새 애니메이션을 실행하기 전에 .stop(true)을 사용하십시오. 몇 군데에서 이미이 작업을 수행하고 있지만 일부 지점을 놓치고 있습니다 (애니메이션 대기열을 지우지도 않음). 무작위로 전체 메뉴에서 커서를 이동 한 다음 중지하고 혼돈을 봅니다. 이벤트 핸들러가 여기 저기에 발사되고 있으며, 일부 항목은 "호버링"되어 있고, 일부 항목은 하위 메뉴를 표시하고 있으며 나중에 잠시 숨겨집니다. true을 함수에 전달하면 jQuery가 일치하는 객체의 애니메이션 대기열을 지우도록 할 수 있습니다. .stop()에 두 번째 인수를 사용하는 것도 고려해 볼 수 있습니다. jQuery는 전체 애니메이션을 완료 한 후에 객체가있는 상태를 설정하기 만하면됩니다. 그러나 (두 번째 인수를 전달하는) 코드를 조정하는 방법에 따라 다르므로 여기에서 바람직한 결과인지 확인하십시오.