javascript - 菜单悬停叠加延迟

Question

我正在努力在 .js 中的 on:hover 菜单中添加 0.3 的叠加延迟。我尝试了 FadeIn()、Delay() 和出队(我可能做错了什么)，但没有运气。有什么建议如何修改此功能吗？

$('.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

有一些不错的插件可以做到这一点。其中之一是$.hoverDelay() 。它为“in”和“out”事件提供了可配置的延迟，如下所示:

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