How do I add a delay to the hover?

Question

I'm trying to add a delay here so that when the user hovers over the menu blocks it doesn't execute right away and waits say .3 seconds before launching the menu. Should I do this via css or jQuery?

_mouseOverHandler = function (event) { 
    clearTimeout(this.mouseTimeoutID);
    $(event.target) 
        .addClass(this.settings.hoverClass);
    _togglePanel.call(this, event);  
    if ($(event.target).is(':tabbable')) {
        $('html').on('keydown.accessible-megamenu', $.proxy(_keyDownHandler, event.target));
    }
};

Answer 1

Maybe you can do it by using setTimeout JS function

setTimeout(function(){
 // in here you should add what you need to do.
},300);

In case you wish to do this by using css you could do it by using transitions

.button{
    transition: 0s background-color;
}

.button:hover{
    background-color:blue;    
    transition-delay:.3s;
}

Answer 2

The code of Accessible-Mega-Menu doesn't use the .hover() function, but it does have both a _mouseOverHandler and _mouseOutHandler. The following is untested, but I'll try to include the theory and explanation.

Add a new variable to hold a timer, I'll use navTimer, into scope. Place this such that both _mouseOverHandler and _mouseOutHandler can see it.

In _mouseOverHandler wrap the operative parts in window.setTimeout:

navTimer = window.setTimeout(function(){
    $(event.target) 
        .addClass(this.settings.hoverClass);
    _togglePanel.call(this, event);  
    if ($(event.target).is(':tabbable')) {
        $('html').on('keydown.accessible-megamenu', $.proxy(_keyDownHandler, event.target));
    }
}, 300);

We don't modify the call to clearTimeout(this.mouseTimeoutID); because we want that to trigger on the mouse activity as it is a separate timer.

Then in _mouseOutHandler add the line window.clearTimeout(navTimer);

This has the effect that when you mouse in it starts a countdown of 300 milliseconds. If you mouse out it clears this timer. If you stay in the mouse in area for the full time then the events will trigger.

Step by Step

1. open your copy of jquery-accessibleMegaMenu.js
2. at line 151 insert this.navTimer = null;
3. after line 650 clearTimeout(this.mouseTimeoutID); insert this.navTimer = setTimeout(function(){
4. before line 658 }); insert }, 300);
5. after line 669 add clearTimeout(this.navTimer);

These steps are a little more closely tied to the syntax and style that the file was using than the instructions above, but it is still untested.

Modified function

This was the intended edit:

_mouseOverHandler = function (event) {
    clearTimeout(this.mouseTimeoutID);
    this.navTimer = setTimeout(function () {
        $(event.target).addClass(this.settings.hoverClass);
        _togglePanel.call(this, event);
        if ($(event.target).is(':tabbable')) {
            $('html').on('keydown.accessible-megamenu', $.proxy(_keyDownHandler, event.target));
        }
    }, 300);
};