js 延迟执行

浏览数：22 / 时间：2015年06月09日

<div id="aaa" style="height:200px; width:200px; background:#CCC;"></div>
<div id="bbb" style="height:200px; width:200px; background:#CFC;"></div>

<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.2.min.js"></script>
<script>
$.fn.hoverDelay = function(options){
	var defaults = {
		hoverDuring: 2000,
		outDuring: 2000,
		hoverEvent: $.noop,
		outEvent: $.noop
	};
	var sets = $.extend(defaults, options || {});
	return $(this).live("hover",function(event) {
		var that = this;
		if(event.type =="mouseenter"){
			clearTimeout(that.outTimer);
			that.hoverTimer = setTimeout(
			function(){sets.hoverEvent.apply(that)},
			sets.hoverDuring
		);
	}
	else 
	{
		clearTimeout(that.hoverTimer);
		that.outTimer = setTimeout(
		function(){sets.outEvent.apply(that)},
		sets.outDuring
	);
	}
	});
}

$("#aaa").hoverDelay({
    hoverEvent: function(){
        $("#bbb").html("进入");	
    },
	outEvent:function(){
		$("#bbb").html("离开");	
	}
});


</script>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js 延迟执行