jQuery hover 延时器实现代码


Posted in Javascript onMarch 12, 2011

例如:

$('#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 () [无] 获取一个不重复的分组名
下载
演示 

http://demo.3water.com/js/2011/mouseDelay/index.htm

打包下载

planeArt.cn原创文章

Javascript 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
jQuery手风琴的简单制作
May 12 jQuery
element-ui多文件上传的实现示例
Apr 10 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
js中if语句的几种优化代码写法
Mar 12 #Javascript
鼠标事件延时切换插件
Mar 12 #Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 #Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 #Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 #Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 #Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 #Javascript
You might like
php用header函数实现301跳转代码实例
2013/11/25 PHP
php中explode函数用法分析
2014/11/15 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
小程序自定义日历效果
2018/12/29 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
python高阶爬虫实战分析
2018/07/29 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
2015年学生管理工作总结
2015/05/26 职场文书