Jquery의 메뉴 버그

Question

내가 개발하고있는 메뉴에 버그가 있습니다. 메뉴에 빠르게 마우스를 올려 놓을 때까지 모두 잘 돌아갑니다.

버그는 파이어 폭스와 크롬에서도 다르다. 파이어 폭스와 크롬에서는 버그가 다르다. 파이어 폭스에서는 무한한 버그가되고, 크롬에서는 몇 초 동안 지속된다. 그러면 사라진다.

<div id="menu" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
      <label class="formatText" id="lblIndicators">Primer Menu</label> 
      <span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float:right"></span> 
      <div id="subMenu" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
      <ul class="options"> 
       <li> 
        <label class="formatText">Sub Menu Uno</label> 
        <span class="ui-icon ui-icon-triangle-1-s" style="float:right"></span> 
        <div id="subMenuRight" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
         <ul class=options> 
          <li>Sub-Sub Menu Uno</li> 
          <li>Sub-Sub Menu Dos</li> 
         </ul> 
        </div> 
       </li> 
       <li>Sub Menu Dos</li> 
      </ul> 
     </div> 
     </div> 

가 여기 내 jQuery의 :

여기 내 HTML 코드의

$(document).ready(initialize); 

function initialize(){ 

    $("#menu").hover(mouseIn,mouseOut); 
    $(".options li").hover(overOption,outOption); 
    $("#subMenu").hover(openRightMenu,closeRightMenu); 
} 

function mouseIn(){ 
    $(this).find('span').attr('class',''); 
    $(this).find('span').attr('class','ui-icon ui-icon-triangle-1-s'); 
    $("#subMenu").slideDown(100); 
} 

function mouseOut(){ 
    $(this).find('span').attr('class',''); 
    $(this).find('span').attr('class','ui-icon ui-icon-triangle-1-e'); 
    $("#subMenu").fadeOut(100); 
} 

function overOption(){ 
    $(this).attr('class','ui-state-hover ui-corner-all'); 
} 

function outOption(){ 
    $(this).attr('class',''); 
} 

function openRightMenu(){ 
    $("#subMenuRight").slideDown(100); 
} 

function closeRightMenu(){ 
    $("#subMenuRight").slideUp(100); 
} 

Here's a video of the bug

Here's a live demo on jsFiddle

도움이 될 것입니다!

Answer 1

새 애니메이션을 만들기 전에 모든 애니메이션을 중단해야 서로 움직이지 않습니다. 큐를 지울 수있는 몇 가지 .stop (true, true) 메서드를 추가했습니다. Have a look 문제가있는 경우

$(document).ready(initialize); 

function initialize(){ 

    $("#menu").hover(mouseIn,mouseOut); 
    $(".options li").hover(overOption,outOption); 
    $("#subMenu").hover(openRightMenu,closeRightMenu); 
} 

function mouseIn(){ 
    $(this).find('span').attr('class',''); 
    $(this).find('span').attr('class','ui-icon ui-icon-triangle-1-s'); 
    $("#subMenu").stop(true, true).slideDown(100); 
} 

function mouseOut(){ 
    $(this).find('span').attr('class',''); 
    $(this).find('span').attr('class','ui-icon ui-icon-triangle-1-e'); 
    $("#subMenu").stop(true, true).fadeOut(100); 
} 

function overOption(){ 
    $(this).attr('class','ui-state-hover ui-corner-all'); 
} 

function outOption(){ 
    $(this).attr('class',''); 
} 

function openRightMenu(){ 
    $("#subMenuRight").stop(true, true).slideDown(100); 
} 

function closeRightMenu(){ 
    $("#subMenuRight").stop(true, true).slideUp(100); 
}