Ошибка меню с 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);
}

Вот видео об ошибке

Вот живая демонстрацияна 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);
}