我需要为下拉菜单的鼠标悬停事件添加延迟，这样如果有人将鼠标悬停在菜单上并转到页面上的另一个链接，菜单不会立即下拉。
感谢您的帮助。
http://jsfiddle.net/cgagliardi/NPVVQ/ http://jsfiddle.net/cgagliardi/NPVVQ/
您可以添加一个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/ http://jsfiddle.net/NPVVQ/3/
至于解释我的代码如何工作：.each()循环遍历调用该函数的 jQuery 对象中的所有元素。对于每个元素，创建一个悬停处理程序，使用setTimeout()延迟调用提供的回调函数 - 如果 mouseleave 在时间到之前发生，则清除此超时，以便inCallback不被调用。这.call()方法用于inCallback and outCallback设置正确的值this.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
