jQuery fully close an open submenu before running next

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 and depending where the mouse is, it ends up flickering between the too.

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

You must use Callback function of hover to trigger something after it has finished animating..

see your updated fiddle.. Please mess with the timings/etc to get the effect you want.

http://jsfiddle.net/n3V4T/6/

also - qualify your selectors better.. the contents of the list items will trigger your mouse over events..

var sub_menu = $('.main-menu .sub-menu'); //select all sub menus
$('.main-menu > ul > li.menuItem').hover(function () {
$this = $(this);
if ($('.sub-menu:visible').size() > 0) {
    console.log('slidingup' + $('.sub-menu:visible').size());
    $('.sub-menu:visible').slideUp('slow', function () {
        $this.find('.sub-menu').slideDown('slow');
        console.log('done');
    });
} else {
    $this.find('.sub-menu').slideDown('slow');
}
}, function () {
//   sub_menu.stop(true, true);//use stop on all submenus
$(this).find('.sub-menu:visible').slideUp('slow');
//Do you need this?
});