Question

我正在努力在on。上添加0.3延迟：.js中的悬停菜单。我尝试了FadeIn（），Delay（）与dequeue（我可能做错了）没有运气。有关如何修改此功能的任何建议吗？

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

延迟菜单悬停覆盖

1 个答案: