Jquery 的菜单错误

Question

我正在开发的菜单有一个错误，一切都很顺利，直到您将鼠标快速悬停在菜单的子菜单上。

该错误在 Firefox 和 Chrome 上也不同，我认为这是因为一个渲染速度比另一个更快，在 Firefox 中它成为一个无限错误，在 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);
}

这是一个视频bug

这是 jsFiddle 的现场演示

任何帮助将不胜感激！

Answer 1

您需要在创建新动画之前停止所有动画，这样它们就不会相互重叠。我添加了一些 .stop(true, true) 方法供您清除队列。 看看是否解决了您的问题

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