Проблемы с анимацией очереди искажают мои div

Question

Итак, у меня есть анимированное выпадающее меню, которое сдвигается вниз, когда мышь находится над ним, а затем исчезает, когда это не так.Достаточно просто.Но если использование перемещает мышь до того, как анимация завершится, то она либо перескочит в конец очереди, обнажая все меню, а затем исчезнет, ​​либо деформирует меню, делая его короче в зависимости от того, какие параметры я передаюstop ().

Как это исправить?

РЕДАКТИРОВАТЬ ::

Вот фотографии того, о чем я говорю:

До: http://img192.imageshack.us/i/beforetc.jpg/

После: http://img682.imageshack.us/i/afterr.jpg/

$('.menu')
    .mouseover( function() {
        var subMenu = [];

        $(this).next().children().each( function() {
            subMenu.push( $(this) );
        });

        slideMenu(subMenu);
    });

$('.menuItem').parent()
    .mouseleave( function() {
        $(this).find('.menuItem').children().stop(true,false).fadeOut(200);
    });

function slideMenu(menu) {
    var subMenu = $.makeArray(menu);

    if ( subMenu.length == 0 )
        return true;
    else {
        var menuItem = subMenu.shift();
        $(menuItem).slideDown(50, function() { slideMenu(subMenu); });
    }
}

---

<div class='box'>
    <div>
        <div class='menu'>Resources</div>
        <div class='menuItem'>
            <div>Library</div>
            <div>Internet</div>
            <div>Your mom</div>
        </div>
    </div>
</div>

Answer 1

Ну, я сделал другой рекурсивный метод, который проверяет, является ли элемент анимированным, а затем останавливается и скрывает его. Ключевым моментом здесь является разделение каждого дочернего элемента, а затем использование второго параметра stop (), который переходит в конец очереди анимации. Это сделает ребенка полностью видимым и соскользнет вниз, чтобы не обрезаться. Раньше, когда я использовал [...].children().each( function() {} ), он прыгал до конца всей очереди анимации, влияя на всех потомков. Может быть, это поможет кому-то еще в моем затруднительном положении.

$('.menuItem').parent()
    .mouseleave( function() {
        var subMenu = [];

         $(this).find('.menuItem').children().each( function() {
            subMenu.push( $(this) );
        });

        hideMenu(subMenu);
    });

function hideMenu(menu) {
    var subMenu = $.makeArray(menu);

    if ( subMenu.length == 0 )
        return false;
    else {
        var menuItem = subMenu.shift();
        $(menuItem).is(':animated') ? $(menuItem).stop(false,true).hide() : 
                                      $(menuItem).fadeOut(300);
        hideMenu(subMenu);
    }
}