jQuery hover delayer implementation code_jquery

For example:

Copy code The code is as follows:

$('#foo').slideUp( 300).delay(800).fadeIn(400); // Delay 800 milliseconds between .slideUp() and .fadeIn().

Can hover design a delayer? The answer is yes. The purpose of the delay operation is to prevent users from accidentally triggering events. Generally, the mouse pointer can be ignored if it stays for less than 150 milliseconds. In fact, if the delay is invaded, it can be used on the hover event. However, in order to avoid compatibility problems caused by John Resig's constant tossing with jQuery, it is better to write standard plug-ins honestly.
Goal
Inherit the elegance of jQuery API: jQuery(expression).mouseDelay(150).hover(over, out)
Do not break the jQuery prototype chain
The above goal looks cool, but it is difficult to implement It’s very simple, with only more than ten lines of code I’m embarrassed to piece together the article:
Source code

Copy code Code As follows:

/*!
* 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';
// Delay constructor
$.fn[plugin] = function (speed, group) {
id;
group = group || this.data(etid) || id;
speed = speed || 150;
// Cache group name to element
if (group === id) this.data(etid, group);
// Temporary official The hover method
this._hover = this.hover;
// Disguise a hover function, and intercept two callback functions and hand them over to the real hover function for processing
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;
};
// Delay to freeze selected elements
$.fn [plugin 'Pause'] = function () {
clearTimeout(this.data(etid));
return this;
};
// static method
$[plugin] = {
// Get a unique group name
get: function () {
return id;
},
// Freeze the delayer of the specified group
pause: function ( group) {
clearTimeout(data[group]);
}
};
})(jQuery, 'mouseDelay');

API Description

方法	参数	说明
mouseDelay (speed, group)	速度, 设置延时分组名称	设置延时触发效果. 两个参数都是可选的
mouseDelayPause()	[无]	冻结选定元素的延时器
jQuery.mouseDelay.pause (group)	延时分组名称	冻结指定分组的延时器
jQuery.mouseDelay.get ()	[无]	获取一个不重复的分组名

Download

• jQuery.mouseDelay.js
• jQuery.mouseDelay.min.js

Demo

http://demo.jb51.net/js/2011/mouseDelay /index.htm

Package download

planeArt.cn original article