JQuery hover extension implementation code

For example:
Copy codeThe Code is as follows:
$ ('# Foo'). slideUp (300). delay (800). fadeIn (400); // The latency between. slideUp () and. fadeIn () is 800 milliseconds.

Can hover design an extension? The answer is yes. The purpose of delayed operations is to prevent users from triggering events by mistake. Generally, the duration of the mouse pointer less than 150 milliseconds can be ignored. In fact, if we intrude into the delay all-around event and let it play a role in the hover event, but it is better to honestly write standard plug-ins to avoid the compatibility problem caused by John Resig's constant efforts in jQuery.
Target
Inherit the elegance of jQuery APIs: jQuery (expression). mouseDelay (150). hover (over, out)
Do not destroy the jQuery prototype chain
The above goal looks very handsome, but it is very simple to implement. I am embarrassed to piece together the article with more than 10 lines of code:
Source code
Copy codeThe Code is 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 = Rate | 150;
// Cache group name to element
If (group = id) this. data (etid, group );
// Save the official hover Method
This. _ hover = this. hover;
// Disguise a hover function and intercept two callback functions for real hover function 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;
};
// Freeze the extension of the selected Element
$. Fn [plugin + 'pause'] = function (){
ClearTimeout (this. data (etid ));
Return this;
};
// Static method
$ [Plugin] = {
// Obtain a unique group name
Get: function (){
Return id ++;
},
// Freeze the extension of the specified group
Pause: function (group ){
ClearTimeout (data [group]);
}
};
}) (JQuery, 'mousedelay ');

API description

Method	Parameters	Description
MouseDelay (Speed,Group)	Speed, set the name of the delay Group	Sets the latency trigger effect. Both parameters are optional.
MouseDelayPause ()	[None]	Freeze the extended period of the selected Element
JQuery. mouseDelay. pause (Group)	Latency group name	Freeze the extension of a specified group
JQuery. mouseDelay. get ()	[None]	Obtain a non-repeated group name

Download

• JQuery. mouseDelay. js
• JQuery. mouseDelay. min. js

Demo

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

Package download

Original planeArt.cn article