jQuery trying to stop the new hover running till the previous is finished

Question

Currently my jQuery code below opens and closes a submenu when its parent is hovered. But my only problem is when I mouse over another top level item the opened submenu starts to close and the submenu for the item I am now hovered starts to slide down, so there are partially 2 submenu's open.

How could I achieve it so that the new submenu would only open only after the previous one has finished closing? The effect I would want ideally would be one like this plugin here

jsFiddle

var sub_menu = $('.main-menu .sub-menu');//select all sub menus
$('.main-menu > ul > li').hover(function () {
    sub_menu.stop(true, true); //use stop on all submenus
    $(this).find('.sub-menu').slideDown('slow');
}, function () {
    sub_menu.stop(true, true);//use stop on all submenus
    $(this).find('.sub-menu').slideUp('slow');
});

Answer 1

Have a look at this code. It will accomplish delayed animation and also removes repeated animation

    var still;
    $('#test').hover(function () {
        var that = $(this);
        if (!still) {
            still = true;
            window.setTimeout(function () {
                if (still) {
                    that.animate({
                        'width': 200
                    }, 100, function () {
                        still = false;
                    });
                }
            }, 100);
        }
    }, function () {
        still = false;
        $(this).animate({
            'width': 100
        }, function () {

        });
    });

Check here

Answer 2

You could add a class to the currently active submenu to prevent the other submenu from firing. Remove the class on callback.