例如： 复制代码 代码如下: $('#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原创文章

　　推荐阅读

　　js中巧用cssText属性批量操作样式

给一个HTML元素设置css属性，如 复制代码 代码如下: var head= document.getElementById("head"); head.style.width = "200px"; head.style.height = "70px"; head.style.display = "block"; 这样写太罗嗦了，为了>>>详细阅读

本文标题：jQuery hover 延时器实现代码

地址：http://www.17bianji.com/kaifa2/JS/24824.html

 1/2    1