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

I once had a similar problem and fixed that by using an active variable that changed from zero to one or whatever when the animation finishes. and one if statement of course that checked whether the active variable has the non active value. You get the idea right? — vaskort, Mar 04 '14 at 14:57

score 1 · Accepted Answer · answered Mar 04 '14 at 15:23

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

score 0 · Answer 2 · answered Mar 04 '14 at 14:59

0

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

answered Mar 04 '14 at 14:59

ravb79

722
5
8

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

2 Answers2