Javascript mootools delay hide/show multilevel menu

I've made a javascript menu with css and javascript. I've used some mootools (1.11 , the only version i can use).

The script runs on domready, it fetches a dom element, and adds functions (showmenu, hidemenu) on the mouseenter and mouseleave events. The dom element is three levels of neste开发者_如何学Cd ul/li`s.

Now I want to add a delay on the menu of 500 ms when one hovers over the menu for the first time, and again when the users leaves the menu (so that the user has half a second time to get back to the menu).

I dont know how to keep track of the events, and cancel them. My knowledge of javascript is not good enough to know where to start. Can anyone give me an example how i should create this? Not really looking for cut and paste code, more pointers in the working of javascript, which native functions i could use, and what is the best way to set something like this up.

Thanx in advance

p.s. Maybe i want to also have a delay (100 ms or so) when the user is already using the menu for the items to show up. Will this be a lot more complex?

perhaps this can give you an idea: http://www.jsfiddle.net/dimitar/stthk/ (extracted it from another menu class I am working on and modded for delay for you as an example)

basically several interesting bits:

options: {
    showDelay: 500,
    hideDelay: 500
},

defines your delays on mouseover and out.

and then the bind for mouseenter deferred via .delay():

mouseenter: function() {
    $clear(_this.timer);
    _this.timer = (function() {
        this.retrieve("fold").setStyle("display", "block");
    }).delay(_this.options.showDelay, this);
},
mouseleave: function() {
    $clear(_this.timer);
    _this.timer = (function() {
        this.retrieve("fold").setStyle("display", "none");
    }).delay(_this.options.hideDelay, this);
}

_this.timer is a shared var that handles the deferred function - it gets cleared up on either mouseout or mouseover. if no event that matters takes place within the allotted time period, it will change the display accordingly, else, it will cancel the function.

this is for mootools 1.2.5 btw (storage system + elment delegation) but the principle remains the same for the bits that matter.

The stylish/anal way of doing it would be to fade in/out the menu. You do that with Fx.Morph where you morph the opacity css property and set the complete property to actually remove the div - notice that it's different to make this work in IE5-7.

The more basic/sensible way is to use setTimeout().