Я пытаюсь завершить анимацию в каждом цикле, прежде чем начать следующий

Question

Вот пример: http://jsbin.com/idepo/5

Падение и все, кажется, выглядят лучше, если не использовать это, ну да ладно. Мой вопрос: если вы щелкнете по одному из пунктов меню (прямо сейчас, только самый левый будет делать что-либо), то список пунктов подменю сместится вниз. То, что я хотел бы сделать, это сделать один слайд вниз, затем еще один слайд ниже этого (как только первый будет сделан анимацией), и так далее, и так далее. На данный момент они скользят как один объект. Кроме того, в качестве дополнительного вопроса, есть ли лучший способ перейти к части '.menuItem' вместо перехода родительский -> дети -> дети?

** * 1006 1007 * EDIT ::

Обновил JS с моей последней попыткой рекурсии, но теперь ничего не происходит. Вот новый скрипт:

$('.menu')
    .click( function() { 
            var menu = $(this).parent().children('.menuItem').children();
            openMenu( menu ); }
    );

function openMenu ( menu ) {
    if ( menu.length > 0 ) {
        var subMenu = menu.shift();
        $(subMenu)
            .css( { top:$(this).position().top, left:$(this).position().left } )
            .slideDown( 'normal', function () { 
                openMenu( menu ); } 
            );
    }
}

:: Конец РЕДАКТИРОВАНИЯ

Вот соответствующий источник:

$('.menu')
    .hover(  
        function(event) { $(this).toggleClass('highlighted'); }
    )
    .click(
        function(event) { $(this).parent().children('.menuItem').children().each( 
            function() {
                $(this)
                    .css( { top:$(this).position().top, left:$(this).position().left} )
                    .slideDown();
            });
        }
    );

---

<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

Я использовал рекурсию:

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

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

        pullDownMenu(subMenu);
    })
    .mouseout( function() {
        $(this).next().children().each( function() { $(this).stop(true, true); } );
    });

function pullDownMenu(subMenu) {
    var menu = $.makeArray(subMenu);
    if ( menu.length == 0 )
        return;
    else {
        var menuItem = menu.shift();
        $(menuItem).slideDown(100, function() { pullDownMenu(menu); });
    }
}

Answer 2

$('.menu').click(function() {
    $(this).parent().find('.menuItem div').each(function(i) {
        $(this).delay(i*1000).fadeIn();
    }
});