Question

我试图在这里添加延迟，以便当用户将鼠标悬停在菜单块上时，它不会立即执行并等待启动菜单前的.3秒。我应该通过css还是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

也许你可以通过使用setTimeout JS函数

来实现

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

如果您希望使用css执行此操作，可以使用过渡

来完成此操作

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

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

Answer 2

Accessible-Mega-Menu的代码不使用.hover()函数，但它同时具有_mouseOverHandler和_mouseOutHandler。以下是未经测试的，但我会尝试包括理论和解释。

添加一个新变量来保存计时器，我将navTimer用于范围。将其放置为_mouseOverHandler和_mouseOutHandler都可以看到它。

在_mouseOverHandler中包含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);

我们不会修改对clearTimeout(this.mouseTimeoutID);的调用，因为我们希望触发鼠标活动，因为它是一个单独的计时器。

然后在_mouseOutHandler中添加第window.clearTimeout(navTimer);行

这会产生这样的效果：当你在鼠标中鼠标开始倒计时300毫秒。如果你鼠标移出它清除这个计时器。如果您将鼠标停留在区域内全部时间，则会触发事件。

一步一步

打开jquery-accessibleMegaMenu.js
在第151行插入this.navTimer = null;
第650行clearTimeout(this.mouseTimeoutID);后插入this.navTimer = setTimeout(function(){

});

插入}, 300);
添加clearTimeout(this.navTimer);

这些步骤与文件使用的语法和样式的关系比上面的说明更紧密，但它仍未经过测试。

修改功能

这是预期的编辑：

_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);
};

如何为悬停添加延迟？

2 个答案: