jQuery hover 延时器实现代码
发布网友
发布时间：2022-04-27 05:47
共1个回答
热心网友
时间：2022-04-23 09:47
复制代码
代码如下:
$('#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说明
#api
table
{
width:99%;
}
#api
table
th
{
color:#808080;
font-weight:bold;
text-shadow:1px
1px
#FFF;
}
#api
td,
#api
th
{
padding:3px;
}
#api
td.time,#api
th.time
{
color:
#999;
text-align:
right;
width:
110px;
}
#api
tr.odd
td,#api
tr.odd
th
{
background-color:#F7F9FD;
}
方法
参数
说明
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原创文章
