jQuery鼠标经过(hover)事件的延时处理,具体JS代码如下:
rush:js;">
(function($){
$.fn.hoverDelay = function(options){
var defaults = {
hoverDuring: 200,outDuring: 200,hoverEvent: function(){
$.noop();
},outEvent: function(){
$.noop();
}
};
var sets = $.extend(defaults,options || {});
var hoverTimer,outTimer;
return $(this).each(function(){
$(this).hover(function(){
clearTimeout(outTimer);
hoverTimer = setTimeout(sets.hoverEvent,sets.hoverDuring);
},function(){
clearTimeout(hoverTimer);
outTimer = setTimeout(sets.outEvent,sets.outDuring);
});
});
}
})(jQuery);
hoverDelay方法共四个参数,表示意思如下:
hoverDuring
鼠标经过的延时时间outDuring
鼠标移出的延时时间hoverEvent
鼠标经过执行的方法outEvent
鼠标移出执行的方法 该函数的目的在于让鼠标经过事件和延时分离的出来,延时以及延迟的清除都已经由此方法解决了。您所要做的,就是设定延时的时间大小,以及相应的鼠标经过或是移除事件即可。举个简单的例子
吧,如下代码:rush:js;">
$("#test").hoverDelay({
hoverDuring: 1000,outDuring: 1000,hoverEvent: function(){
$("#tm").show();
},outEvent: function(){
$("#tm").hide();
}
});
以下为更简洁的一个
案例
:rush:js;">
$("#test").hoverDelay({
hoverEvent: function(){
alert("经过 我!");
}
});
表示的含义是id为test的元素在鼠标经过后200毫秒后弹出含有“经过 我!”文字字样的弹出框。
以上就是关于jQuery鼠标经过(hover)事件的延时处理全部内容,希望对大家的学习有所帮助。