首页 / JQUERY / jQuery hover 延时器实现代码

jQuery hover 延时器实现代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery hover 延时器实现代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2479字，纯文字阅读大概需要4分钟。

内容图文

例如：
代码如下:

$('#foo').slideUp(300).delay(800).fadeIn(400);// 在.slideUp() 和 .fadeIn()之间延时800毫秒。 
 
hover是否可以设计一个延时器呢？答案是肯定的。延时操作目的是为了防止用户误触发事件，一般情况下鼠标指针小于150毫秒的停留时间都可以被忽略。其实，如果入侵delay全能让其作用在hover事件上，但是为了避免John Resig不断的折腾jQuery而导致兼容问题，还是老老实实的写标准插件比较好。 
目标 
继承jQuery API的优雅：jQuery(expression).mouseDelay(150).hover(over, out) 
不得破坏jQuery原型链 
上述目标看起来很帅气，实现起来却非常简单，仅仅十多行的代码我都不好意思拿来拼凑文章： 
源代码 
 代码如下:

/*! 
* jQuery.mouseDelay.js v1.2 
* http://www.planeart.cn/?p=1073 
* Copyright 2011, TangBin 
* Dual licensed under the MIT or GPL Version 2 licenses. 
*/ 
(function ($, plugin) { 
var data = {}, id = 1, etid = plugin + 'ETID'; 
// 延时构造器 
$.fn[plugin] = function (speed, group) { 
id ++; 
group = group || this.data(etid) || id; 
speed = speed || 150; 
// 缓存分组名称到元素 
if (group === id) this.data(etid, group); 
// 暂存官方的hover方法 
this._hover = this.hover; 
// 伪装一个hover函数，并截获两个回调函数交给真正的hover函数处理 
this.hover = function (over, out) { 
over = over || $.noop; 
out = out || $.noop; 
this._hover(function (event) { 
var elem = this; 
clearTimeout(data[group]); 
data[group] = setTimeout(function () { 
over.call(elem, event); 
}, speed); 
}, function (event) { 
var elem = this; 
clearTimeout(data[group]); 
data[group] = setTimeout(function () { 
out.call(elem, event); 
}, speed); 
}); 
return this; 
}; 
return this; 
}; 
// 冻结选定元素的延时器 
$.fn[plugin + 'Pause'] = function () { 
clearTimeout(this.data(etid)); 
return this; 
}; 
// 静态方法 
$[plugin] = { 
// 获取一个唯一分组名称 
get: function () { 
return id ++; 
}, 
// 冻结指定分组的延时器 
pause: function (group) { 
clearTimeout(data[group]); 
} 
}; 
})(jQuery, 'mouseDelay'); 
 


API说明









方法
参数
说明



mouseDelay (speed, group)
速度, 设置延时分组名称
设置延时触发效果. 两个参数都是可选的



mouseDelayPause()
[无]
冻结选定元素的延时器



jQuery.mouseDelay.pause (group) 
延时分组名称
冻结指定分组的延时器



jQuery.mouseDelay.get ()
[无]
获取一个不重复的分组名
下载 



    

  • jQuery.mouseDelay.js 

  • jQuery.mouseDelay.min.js 

演示 

http://demo.jb51.net/js/2011/mouseDelay/index.htm 

打包下载

planeArt.cn原创文章

内容总结

以上是互联网集市为您收集整理的jQuery hover 延时器实现代码全部内容，希望文章能够帮你解决jQuery hover 延时器实现代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/369656.html

来源：【匿名】