One, about mouse hover event and delay
A mouse event is one of the most common events on a Web page. Simple hover can be implemented with Css:hover pseudo class, with JS for complex points.
In general, we do not delay processing the mouse hover event. However, sometimes, in order to avoid unnecessary interference, the mouse hover events are often delayed processing. The so-called interference, that is, when the user mouse inadvertently touch a link, tab, or other areas, this does not show hidden layer, or tab switch, but because these elements bound hover event (or MouseOver event), and no delay, these times will immediately trigger, Instead, it interferes with the user.
For example, the home page of Tencent, almost all of the mouse after the event was delayed processing, such as its tab:
Or the top of the search navigation bar, see the following figure:
Ii. Examples and demonstrations
The main content of this article is to show me a few days ago, the method of mouse delay, jquery method, the level of poor, only for reference. This article on the Tencent web search box to find some of the mouse after the effect as an example, demo jquery under the delay processing. The following illustration is a screenshot of the results of the demo page:
Iii. Code and implementation
Speaking of delay, inseparable from the window under the SetTimeout method, this example of the JQuery method is the core of the settimeout. The code is not long, complete as follows:
Copy Code code as follows:
(function ($) {
$.fn.hoverdelay = function (options) {
var defaults = {
HOVERDURING:200,
OUTDURING:200,
Hoverevent:function () {
$.noop ();
},
Outevent:function () {
$.noop ();
}
};
var sets = $.extend (Defaults,options | | {});
var hovertimer, Outtimer;
return $ (this). each (function () {
$ (this). Hover (function () {
Cleartimeout (Outtimer);
Hovertimer = settimeout (sets.hoverevent, sets.hoverduring);
},function () {
Cleartimeout (Hovertimer);
Outtimer = settimeout (sets.outevent, sets.outduring);
});
});
}
}) (JQuery);
The purpose of this code is to let the mouse through the event and delay separation, delay and delay of the purge has been resolved by this method. All you have to do is set the time scale for the delay, and the corresponding mouse pass or remove event. For a simple example, the following code:
Copy Code code as follows:
$ ("#test"). Hoverdelay ({
Hoverevent:function () {
Alert ("Pass me!") ");
}
});
The implication is that the element with the ID test pops up after 200 milliseconds after the mouse passes through me! The pop-up box for the text typeface.
OK, now apply to the example in this article.
Tencent's homepage of the search box above in addition to the mouse after the delay, its skin is also worth mentioning, on the skin I have mentioned before, in the jquery-product design and user experience of a number of technical implementation of the article, the corresponding demo page you can ruthlessly click here: Tencent homepage Personalized Skin-changing Demo page
First, display the main HTML structure field code of Tencent's first search bar:
Copy Code code as follows:
<div id= "Sosofod" >
<div style= "Display:none" class= "more" Id= "TM" >
<ul>
<li><a href= "#" > Comprehensive </a></li>
<li><a href= "#" > News </a></li>
<li><a href= "#" > Dictionary </a></li>
<li><a href= "#" > Life </a></li>
<li><a href= "#" > Encyclopedia </a></li>
<li style= "border-top:1px solid RGB (178, 208, 234);" ><a href= "#" > All Products </a></li>
</ul>
</div>
</div>
With the first home code almost consistent, such as false replacement. After applying the delay method with no technical content in this article, the following code implementation can be used to implement deferred execution.
Copy Code code as follows:
$ (". S2"). each (function () {
$ ("#sosoFod H3"). each (function () {
var that = $ (this);
var id = that.attr ("id");
if (ID) {
That.hoverdelay ({
Hoverevent:function () {
$ (". S1"). attr ("Class", "S2");
That.attr ("Class", "S1"); Thank you for "Type23" for the Binding object method
$ (this). attr ("Class", "S1");
}
});
}else{
That.hoverdelay ({
outduring:1000,
Hoverevent:function () {
$ ("#tm"). Show ();
},
Outevent:function () {
$ ("#tm"). Hide ();
}
});
}
});
Alas, ashamed, the code is so, no technical content, hope to useful useful. The "more" Drop-down mouse moves out after 1000 milliseconds after the dropdown box is hidden.
Basically the code is in the page, say something useful.
The Hoverdelay method has a total of four parameters, which means the following:
h Overduring Mouse delay time
outduring Mouse out delay time
Hoverevent Mouse-executed method
Outevent Mouse move out of the method
