JQuery - выпадающее меню - mouseenter / mouseleave

Question

Я потратил как минимум 2 часа, пытаясь заставить эту работу ..

По сути, у меня есть раскрывающееся меню с элементами, и я попытался написать что-то, имитирующее плагин HoverIntent, в котором пользователь может перемещать свою мышь за пределы элемента на фиксированное количество секунд до закрытия меню.

То, что я написал, частично работает, за исключением того, что, если вы попытаетесь слишком быстро перемещать мышь между меню, она "сломается". Если вы делаете это медленно, все будет работать как положено

Убедитесь сами:

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

как я могу это исправить ??

Answer 1

Это должно сделать это:

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