js延时提示框

延时提示框效果经常会用到

直接上代码

	<style type="text/css">
			#div1 {
				height: 100px;
				width: 100px;
				background-color: red;
			}
			#div2 {
				height: 300px;
				width: 300px;
				background-color: blue;
				display: none;
			}
			div {
				margin: 5px;
				float: left;
			}
	</style>

<div id="div1"></div>
<div id="div2"></div>

<script type="text/javascript">
		//当鼠标移出div1的时候，div2不立刻消失，延时消失
		//当鼠标移入div2时候，div2始终保持显示状态，
		//当鼠标移出提示框时候，提示框延时消失
		var Div1 = document.getElementById("div1");
		var Div2 = document.getElementById("div2");
		var timer = null;
		
		Div1.onmouseover=function(){
		  	clearTimeout(timer);
		  	Div2.style.display="block";
		}
		Div1.onmouseout=function(){
		  	timer=setTimeout(function(){
		   		Div2.style.display="none";
		  	},500);
		}
		Div2.onmouseover=function(){
		  	clearTimeout(timer);
		}
		Div2.onmouseout=function(){
		  	timer=setTimeout(function(){
		   		Div2.style.display="none";
		  	},500) 
		}
		
		//上面代码可以整理合并为以下代码：
		div1.onmouseover = div2.onmouseover = function() {
			clearTimeout(timer);
			div2.style.display = "block";
		}

		div1.onmouseout = div2.onmouseout = function() {
			timer = setTimeout(function() {
				div2.style.display = "none";
			}, 500)
		}
	</script>

jq实现代码：

	//注意引用jq
	<script src="./jquery-1.11.3.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		var timer=null;
	
		$("#div1").mouseover(function(){
			clearTimeout(timer);
			$("#div2").show()
		})
		$("#div1").mouseout(function(){
			timer=setTimeout(function(){
				$("#div2").hide();
			},500)
		})
		
		$("#div2").mouseover(function(){
			clearTimeout(timer);
			$("#div2").show()
		})
		$("#div2").mouseout(function(){
			timer=setTimeout(function(){
				$("#div2").hide();
			},500)
		})
	</script>