html鼠标失去悬停事件hover,jQuery鼠标经过(hover)事件的延时处理

无标题文档

#test{

width:20px;

height:20px;

border:1px solid red;

}

a

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

}

});