與jQuery

Question

我在與我開發菜單中的錯誤菜單錯誤，這一切都很好，直到你的鼠標在菜單快速的孩子。

的錯誤也對Firefox和Chrome不同，我認爲它是因爲一個渲染速度比其他快，在Firefox它變成一個無限的bug，在Chrome它最後幾秒鐘，然後消失。

這裏是我的html代碼：

<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：

$(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); 
}