MouseEnter/MouseLeave 이벤트가 적절하게 대기열에 들어 가지 않음

Question

사용자가 요소를 들여다 보며/나가는 위치에 따라 하위 메뉴의 표시/숨기기를 탐색 할 때 드롭 다운 애니메이션이 있습니다. 내가 겪고있는 문제는 이것들이 올바르게 큐잉되지 않는다는 것인데, 사용자가 엘리먼트 위로 빠르게 넘어갈 때 메뉴는 열려있다.

애니메이션에 연결된 .stop (true) 함수를 사용해 보았지만 작동하지 않는 것 같습니다.

제안 사항?

$('.navbar-nav > .menu-item-has-children').on({ 
     mouseenter: function() { 
      console.log('Hovered In'); 
      $(this).children('.sub-menu').addClass('main-fix').stop(true, true).show('slide', {direction: 'up', duration: 250, easing: 'easeInQuint'}).removeClass('main-fix'); 
     }, 
     mouseleave: function() { 
      console.log('Hovered Out'); 
      $(this).children('.sub-menu').addClass('main-fix').stop(true, true).hide('slide', {direction: 'up', duration: 250, easing: 'easeInQuint'}).removeClass('main-fix'); 
     } 
     }); 

http://jsfiddle.net/h3qacoez/1/

Answer 1

은 왜 CSS와 이에 대한 :hover을 사용할 수 있습니까? CSS의 전환을 통해 요소를 애니메이션으로 만들 수 있습니다. 오래된 브라우저를 지원해야하는 요구 사항이 없다면 이는 잘 작동하고 자바 스크립트의 두통과 타이밍 문제를 줄여 줄 것입니다. 여기 완전성

은 바이올린 행동에서 보이고있다 : 첫 번째 부분은 정상 상태를 설정

#navbar .navbar-nav .menu-item .sub-menu { 
    ... 
    /* no display: none! */ 
    max-height: 0; 
    overflow: hidden; 

    -webkit-transition: max-height 250ms ease-in-out; 
    transition: max-height 250ms ease-in-out; 
} 

#navbar .navbar-nav .menu-item:hover .sub-menu { 
    max-height: 1000px; 
} 

번째는 마우스 오버시 경우 : CSS의 http://jsfiddle.net/dPixie/q0tfxvwd/

관련 부분 것은 . 높이 대신에 최대 높이가 사용되므로 하위 메뉴의 높이를 지정할 수 있습니다 (max.height는 픽셀 단위이며 모든 하위 메뉴를 수용 할 수있을 정도로 커야합니다).

왜?

누군가의 도움으로 문제를 해결할 수 있도록 도움을주는 것은 건설적인 것이 아닙니다. 때로는 접근법을 다시 생각해 볼 가치가 있습니다.

메뉴 애니메이션에 JS를 사용하면 확실히 작동합니다. 그러나 그것은 위의 접근 방법에 무엇인가를 추가합니까? CSS를 사용하여 렌더링을 그래픽 카드로 오프로드하고 호버 감지 기능이 내장 된 브라우저를 사용하여 코드를 새로운 웹 표준에 맞게 진행하십시오.

타이밍에 대한 외부 이벤트에 따라 레거시 클라이언트 또는 매우 복잡한 애니메이션에서 픽셀 완벽한 결과를 지불 할 의향이있는 클라이언트와 같이 매우 특별한 요구가없는 한 일반적으로 JS에서 이러한 애니메이션을 제작할 필요가 없습니다. 그리고 당신이 그것을 항상 동일하게하기 위해 돈을 지불하지 않는다면 ...