jQuery hover 延时器实现代码
jQuery hover 延时器实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:例如:复制代码代码如下:$('#foo').slideUp(300).delay(800).fadeIn(400);//在.slideUp(...

例如:

复制代码 代码如下:

$('#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原创文章

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类