Submenu setup with jquery and effect 'fold'

Question

I want to get open submenu with a jquery effect fold, the problem is if a user do a "hover effect" to fast then the menu stay open, how can i avoid this, my jquery code is:

$('ul.mainmenu li').hover(
    function() {
        $(this).children('ul').show('fold', 570);
    }, function() {
        $(this).children('ul').hide('fold', 500);
    }
);

My JsFiddle link is: http://jsfiddle.net/9wkBf/

Answer 1

Updated Fiddle

The reason behind that problem is, The first event $(this).children('ul').show('fold', 570); is queued and until it completes, the second animation will not start.

The following snippet can be a workaround

$('ul.mainmenu > li').hover(
    function() {
        $(this).children('ul').show('fold', 570);
    }, function() {
        $('ul:not(.mainmenu)').hide('fold', 500);

    }
);

*Important Note : This will work only for current scenario.