菜单悬停覆盖上的延迟

Question

I am struggling to add 0.3 delay on overlay in on:hover menu in .js. I tried FadeIn(), Delay() with dequeue (I might have done something wrong) without luck. Any suggestions how to modify this function?

$('.activate-overlay-effect').on('mouseenter mouseleave', '.menu-item-responsive', function(e) {
    var target = $('.menu');
    var overlay = $('#overlay');

    if (overlay.length && !$('#' + _.container).hasClass('touch')) {
        if (e.type == 'mouseenter') {
            target.addClass('hovered');
            overlay.removeClass('hidden');
        } else if (e.type == 'mouseleave') {
            target.removeClass('hovered');
            overlay.addClass('hidden');
        } else {}
    }

    return false;
});

Answer 1

There are some nice plugins that does exactly that. One of them is $.hoverDelay() . It gives you a configurable delay for both the 'in' and 'out' events like so:

$('.activate-overlay-effect').hoverDelay({
    delayIn: 200, 
    delayOut:700,
    handlerIn: function($element){
      $element.css({backgroundColor: 'red'});  
    },
    handlerOut: function($element){
      $element.css({backgroundColor: 'auto'});  
    }
});