JQuery - dropdown menu - mouseenter/mouseleave

Question

I've spent at least 2 hours trying to make this work..

Basically I have a dropdown menu with items and I've tried to write something that imitates HoverIntent plugin where the user is allowed to move his mouse outside the item for a fixed number of seconds before the menu closes.

What I wrote is partially working except that if you try to move your mouse between the menus too fast, it will "break". If you do it slowly, everything will work as expected

See it for yourself:

http://jsfiddle.net/DkJg8/1/

var old_item;

$(".nav_menu > li").mouseenter(function(){

        var item_selected = $("ul", this);
        // if this current item is already in process of being hidden
        var timeout = item_selected.data("timeout_hide");
        if(timeout){
            clearTimeout(timeout);
            item_selected.removeData("timeout_hide");

        } else {

            if(old_item){
                old_item.hide();
            }

            item_selected.show();
        }
});

$(".nav_menu > li").mouseleave(function(){
        var item_selected = $("ul", this);

        old_item = item_selected;

        item_selected.data("timeout_hide", setTimeout(function(){
                item_selected.removeData("timeout_hide");
                item_selected.hide();
        }, 500));
});

how can I fix it??

You should post your original code for easy comparison.

joelmdev
– joelmdev

2011-10-15 00:31:46 +00:00
Commented Oct 15, 2011 at 0:31 — joelmdev
– joelmdev, Commented Oct 15, 2011 at 0:31

joelmdev · Accepted Answer · 2011-10-15 00:26:42Z

2

This should do it:

var old_item;
var timeout;

$(".nav_menu > li").mouseenter(function(){
    var item_selected = $("ul", this);
    clearTimeout(timeout);
    if(old_item){
        old_item.hide();
    }
    item_selected.show();      
});

$(".nav_menu > li").mouseleave(function(){
    var item_selected = $("ul", this);       
    old_item = item_selected;
    timeout= window.setTimeout(function(){item_selected.hide()}, 500);  
});

answered Oct 15, 2011 at 0:26

joelmdev

11.9k11 gold badges68 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery - dropdown menu - mouseenter/mouseleave

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related