php hover,jQuery–鼠标经过(hover)事件的延时处理

jQuery – 鼠标经过(hover)事件的延时处理，具体JS代码如下：

(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);

hoverDelay方法共四个参数，表示意思如下：

hoverDuring        鼠标经过的延时时间

outDuring            鼠标移出的延时时间

hoverEvent          鼠标经过执行的方法

outEvent              鼠标移出执行的方法

该函数的目的在于让鼠标经过事件和延时分离的出来，延时以及延迟的清除都已经由此方法解决了。您所要做的，就是设定延时的时间大小，以及相应的鼠标经过或是移除事件即可。举个简单的例子吧，如下代码：

$("#test").hoverDelay({

hoverDuring: 1000,

outDuring: 1000,

hoverEvent: function(){

$("#tm").show();

},

outEvent: function(){

$("#tm").hide();

}

});

以下为更简洁的一个案例：

$("#test").hoverDelay({

hoverEvent: function(){

alert("经过我！");

}

});

表示的含义是id为test的元素在鼠标经过后200毫秒后弹出含有“经过我！”文字字样的弹出框。