如何为CSS垂直下拉菜单添加延迟
我需要在我的下拉菜单的鼠标hover事件中添加一个延迟，这样如果有人鼠标在菜单上转到页面上的另一个链接，菜单就不会立即下拉。 谢谢你的帮助。
http://jsfiddle.net/cgagliardi/NPVVQ/
你可以添加一个setTimeout()来延迟show() ，并在hover时清除超时，这样如果用户在延迟结束前将鼠标移出，它将被取消。 你可以将它封装在你自己的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对象中的所有元素。 对于每个元素，创建一个hover处理程序，它使用setTimeout()来延迟调用提供的回调函数 – 如果mouseleave在时间结束之前发生，则清除此超时以便不调用inCallback 。 inCallback .call()方法用于inCallback和outCallback为此设置正确的值。
您可以使用CSS3动画或过渡。
http://www.css3maker.com/css3-animation.html
http://www.css3maker.com/css3-transition.html
或者你可以在Javascript中处理超时，我认为一种简单的方法是在show();之前附加一个setTimeout show(); 并在mouseleave事件上使用clearTimeout
我现在更新了代码，你的菜单在1/2秒后出现 。 演示
$('#navigation').show(2000);
这足以延迟jquery中show（）的动画 ….
我只是用另一个div来暂停你可以看到它的动画。