Question

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

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()来延迟调用所提供的回调函数 - 如果鼠标距离在时间结束之前发生，则清除此超时，以便不调用inCallback。在.call()和inCallback上使用outCallback方法为this设置正确的值。

Answer 2

您可以使用CSS3动画或过渡。

http://www.css3maker.com/css3-animation.html

http://www.css3maker.com/css3-transition.html

或者您可以使用Javascript处理超时，我认为一种简单的方法是在setTimeout之前附加show();并在mouseleave事件上使用clearTimeout

Answer 3

我现在更新了代码，你的菜单是在 1/2秒之后。 Demo

$('#navigation').show(2000);

这足以推迟 jquery 中 show（）的动画 .... / p>

我刚用另一个div暂停你可以看到它的动画。

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

3 个答案: