Question

So, I have an animated drop down menu that slides down when your mouse is over it, then fades away when it isn’t. Simple enough. But if the use moves the mouse before the animation is complete moving down, then it will either jump to the end of the queue exposing the entire menu and then fading, or it deforms the menu by making it shorter depending on what parameters I pass to stop().

How do I fix this?

EDIT::

Here’s pictures of what I’m talking about:

Before:
http://img192.imageshack.us/i/beforetc.jpg/

After:
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

Well I made another recursive method that checks if the element is animated, and then stops and hides it. The key here is separating each child and then using the stop()’s second parameter which jumps to the end of the animation queue. This will render the child fully visible and slid down so that is not truncated. Before when I was using the [...].children().each( function() {} ), it would jump the end of the entire animation queue effecting all children. Maybe this’ll help someone else in my predicament.

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