A5下载 - 努力做内容最丰富最安全的下载站!

A5站长下载站

当前位置:A5下载 > 编程开发 > 网站开发 > jQuery实现鼠标经过事件的延时处理效果这篇文章主要介绍了jQuery实现鼠标经过事件的延时处理效果,需要的朋友可以参考下

jQuery实现鼠标经过事件的延时处理效果这篇文章主要介绍了jQuery实现鼠标经过事件的延时处理效果,需要的朋友可以参考下

时间:2015-10-25 17:17作者:fang人气:150

jQuery鼠标经过(hover)事件的延时处理,具体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 鼠标移出执行的方法

该函数的目的在于让鼠标经过事件和延时分离的出来,延时以及延迟的清除都已经由此方法解决了。您所要做的,就是设定延时的时间大小,以及相应的鼠标经过或是移除事件即可。举个简单的例子吧,如下代码:

$("#test").hoverDelay({

hoverDuring: 1000,

outDuring: 1000,

hoverEvent: function(){

$("#tm").show();

},

outEvent: function(){

$("#tm").hide();

}

});

以下为更简洁的一个案例:

$("#test").hoverDelay({

hoverEvent: function(){

alert("经过 我!");

}

});

表示的含义是id为test的元素在鼠标经过后200毫秒后弹出含有“经过 我!”文字字样的弹出框。

以上就是关于jQuery鼠标经过(hover)事件的延时处理全部内容,希望对大家的学习有所帮助。

标签jQuery,实现,鼠标,经过,事件,延时,处理,效果,这篇

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号