jQuery hover 延时器实现代码

 更新时间:2011年03月12日 21:48:48   作者:  
在上一篇文章 《鼠标事件延时切换插件》 中,我已经写了几个简单的延时器的例子,今天突然想到jQuery的自定义动画的animate方法可以使用delay
例如:
复制代码 代码如下:

$('#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.jb51.net/js/2011/mouseDelay/index.htm

打包下载

planeArt.cn原创文章

相关文章

  • 基于jQuery的网页右下角弹出广告(IE7,firefox)

    基于jQuery的网页右下角弹出广告(IE7,firefox)

    以前曾写过一个,不过太麻烦了,呵呵```现在改进了一下,其实很简单:css定位层一直在右下角,用js控制层的高度增减。
    2010-08-08
  • jQuery随机切换图片的小例子

    jQuery随机切换图片的小例子

    jQuery随机切换图片的小例子,需要的朋友可以参考一下
    2013-04-04
  • jquery入门—选择器实现隔行变色实例代码

    jquery入门—选择器实现隔行变色实例代码

    JQuery入门—选择器实现隔行变色如何实现呢?JQuery选择器继承了CSS、path语音的部分语法,允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择,接下来详细介绍,需要的朋友可以参考下
    2013-01-01
  • 用jquery设置按钮的disabled属性的实现代码

    用jquery设置按钮的disabled属性的实现代码

    在html标签中设置按钮被禁用,可以使用如下代码
    2010-11-11
  • jquery简易手风琴插件的封装

    jquery简易手风琴插件的封装

    这篇文章主要为大家详细介绍了jquery简易手风琴插件的封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • jQuery实现表单验证

    jQuery实现表单验证

    这篇文章主要为大家详细介绍了jQuery实现表单验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • jquery.validate分组验证代码

    jquery.validate分组验证代码

    在很多时候,我们都不是一步就将所有信息填写完整,然后提交。而是分步进行填写表单
    2011-03-03
  • 快速实现jQuery多级菜单效果

    快速实现jQuery多级菜单效果

    这篇文章主要教大家如何快速实现jQuery多级菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jQuery Ajax之load()方法

    jQuery Ajax之load()方法

    jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是laod()、$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法。
    2009-10-10
  • jQuery.extend 函数及用法详细

    jQuery.extend 函数及用法详细

    Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起通过本篇文章学习jquery.extend函数及用法详解吧
    2015-09-09

最新评论