javascript - 如何为 CSS 垂直下拉菜单添加延迟

Question

我需要为下拉菜单的鼠标悬停事件添加延迟，这样如果有人将鼠标悬停在菜单上并转到页面上的另一个链接，菜单不会立即下拉。 感谢您的帮助。

http://jsfiddle.net/cgagliardi/NPVVQ/

Answer 1

您可以添加setTimeout()延迟show() ，并在悬停时清除超时，这样如果用户在延迟结束之前将鼠标移出，它将被取消。您可以将其封装在您自己的 jQuery 插件中:

jQuery.fn.hoverWithDelay = function(inCallback,outCallback,delay) {
    this.each(function(i,el) {
        var timer;
        $(this).hover(function(){
           timer = setTimeout(function(){
              timer = null;
              inCallback.call(el);
           }, delay);
        },function() {
           if (timer) {
              clearTimeout(timer);
              timer = null;
           } else
              outCallback.call(el);
        });
    });
};

你可以这样使用:

$('ul.top-level li').hoverWithDelay(function() {
    $(this).find('ul').show();
}, function() {
    $(this).find('ul').fadeOut('fast', closeMenuIfOut);
}, 500);

我匆忙地将这个插件拼凑在一起，所以我确信它可以改进，但它似乎可以在您的演示的更新版本中工作:http://jsfiddle.net/NPVVQ/3/

就解释我的代码如何工作而言: .each()循环遍历调用该函数的 jQuery 对象中的所有元素。对于每个元素，都会创建一个使用 setTimeout() 的悬停处理程序。延迟调用提供的回调函数 - 如果 mouseleave 在时间结束之前发生，则清除此超时，以便 inCallback不被调用。 .call()方法用于 inCallback和outCallback为 this 设置正确的值.