concurrent execution of event handlers in jquery

Question

I have a horizontal menu in my website, and each for item in menu I have a image and a sub menu.I write an event handler for hover. I should hide all visible sub menu and images before show right image for the menu. But the problem is when I switch between two menus rapidly first one become visible after handler for second one execute hide for all images. And as a result both images become visible. what a mess! here is my code , I need something to prevent execution of function before fadeIn or slidedown completed. here is my js code:

$(function() {

    $("#primary-menu li").hover(function(){

        if($("#image-menu-"+mlid).is(":visible"))
            return

//      hide previous image
        $("#sub-menu div").hide()
        $('#menu-image img').hide();

        var attr = $(this).attr('class');
        var mlid = attr.substr('5');


        var index = $("#primary-menu li").index(this);      

        $("#image-menu-"+mlid).fadeIn(600);

        if($("#div-"+mlid).length)
            $("#div-"+mlid).slideDown('fast');

    }); 
});

Answer 1

delay should do the trick, there are examples over at their website.