<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script src= "Jquery-1.8.1.js" ></script>
<title> Untitled Document </title>
<style>
#test {
width:20px;
height:20px;
border:1px solid red;
}
</style>
<body>
<div id= "Test" >
</div>
<div id= "TM" style= "Display:none" >a</div>
</body>
<script type= "Text/javascript" >
(function ($) {
$.fn.hoverdelay = function (options) {
var defaults = {
hoverduring:600,
outduring:600,
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);
$ ("#test"). Hoverdelay ({
hoverduring:600,
outduring:600,
Hoverevent:function () {
$ ("#tm"). Show ();
},
Outevent:function () {
$ ("#tm"). Hide ();
}
});
</script>
jquery mouse over (hover) event delay processing