如何修改这个超级菜单的悬停速度？答案

【问题标题】：How to modify the Hover speed of this Mega Menu?如何修改这个超级菜单的悬停速度？
【发布时间】：2014-04-25 19:23:50
【问题描述】：

我正在尝试修改此大型菜单的鼠标悬停速度或悬停速度，当用户将鼠标悬停在按钮上时，下拉菜单启动前会有 0.3 秒的延迟。这里是实际站点http://adobe-accessibility.github.io/Accessible-Mega-Menu/

这里的 jquery：http://adobe-accessibility.github.io/Accessible-Mega-Menu/js/jquery-accessibleMegaMenu.js

感谢任何提示。

提前致谢，瑞克

【问题讨论】：

标签： jquery drop-down-menu hover settimeout megamenu

【解决方案1】：

是的，请检查 megamenu.css 文件的第 139 和 151 行，只需更改 Transitions ease 的值即可。

    -webkit-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
       -moz-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
        -ms-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
         -o-transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
            transition: opacity 250ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;

    border: 1px solid rgba(0,0,0,0.3);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.accessible-megamenu .accessible-megamenu-panel.open {
    visibility: visible;
    top: 3em;
    max-height: 1200px;
    opacity: 1;
    z-index: 1001;
    -webkit-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
       -moz-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
        -ms-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
         -o-transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
            transition: opacity 250ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
}

希望对你有所帮助。

问候。

【讨论】：

谢谢雷米。现在要试一试。周末愉快！

【解决方案2】：

我实际上是在尝试通过 JQuery 来做到这一点。以下代码在鼠标移出时有 0.3 秒的延迟，但我不确定如何使它适用于 MouseOver：

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

    /**
     * @name jQuery.fn.accessibleMegaMenu~_mouseOutHandler
     * @desc Handle mouseout event on mega menu.
     * @param {event} Event object
     * @memberof jQuery.fn.accessibleMegaMenu
     * @inner
     * @private

     Exit Time is now .300 seconds

     */
    _mouseOutHandler = function (event) {
        var that = this;
        $(event.target)
            .removeClass(that.settings.hoverClass);

        that.mouseTimeoutID = setTimeout(function () {
            _togglePanel.call(that, event, true);
        }, 300);
        if ($(event.target).is(':tabbable')) {
            $('html').off('keydown.accessible-megamenu');
        }
    };

【讨论】：