Question

我正在开发的菜单有一个错误，一切顺利，直到你快速将鼠标移到菜单的孩子身上。

这个bug在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);
}

Jquery的菜单错误

1 个答案: