原生js和jq的延时提醒框（QQ头像为例）

首先说明一下效果：鼠标放到头像上面左边会显示一块个人资料框，离开头像后过一小段时间个人资料信息消失，离开头像后如果鼠标放在个人资料框上面则个人资料框不消失； html代码：一个id为head的标签和一个id为left的标签这两个就足以完成下来的效果；

#head相当于头像；#left相当于个人资料框(一开始是隐藏的 display:none;)；css样式就不写了，直接写js 原生js：首先获取dom节点

  var Head = document.getElementById("head");
  var Left = document.getElementById("left");

有鼠标的移入移出动作所以要用到onmouseover（鼠标移入）和onmouseout（鼠标移出）两个事件先来写移入事件：

  Head.onmouseover = function(){
	 Left.style.display = "block";
  }
  鼠标放在Head上面则Left显示  添加css属性display：block；

下来要分析一下了：鼠标离开头像之后Left不能立即消失，所以这块要用到延时器（setTimeout）；鼠标离开头像之后我们还要做一个判断鼠标是否移入了Left，所以要做一个开关（就是给一个变量进行判断）先从简单的来写一点点往上加，先不做是否移入Left判断那么移出Head应该这么写：

Head.onmouseout = function(){
	setTimeout(function(){   //延时一秒让Left消失
			Left.style.display = "none";
	},1000);
}

下来我们就要写开关了判断鼠标离开头像之后是否进入Left

var isIndom = false;  //给一个变量 用它来模拟开关 通过判断变量我们就可以知道鼠标是否移入Left
Left.onmouseover = function(){  //如果鼠标移入Left 则将isIndom改为true
	isIndom = true; 
}
Left.onmouseout = function(){   //鼠标移出Left 则将isIndom改为flase并将Left隐藏  this指向Left
	isIndom = false;          
	this.style.display = "none";
}

最后要给Head的鼠标移出事件里面加上判断就可以了在inIndom == flase的时候选择隐藏Head

 Head.onmouseout = function(){
	setTimeout(function(){   //延时一秒让Left消失
	    if(!isIndom){
	        Left.style.display = "none";
	    }	
	},1000);
}

上面就是原生js写的延时提醒框下来用jq写一个同样的效果在jq中鼠标移入移出事件分别是 mouseover() mouseout();

$("#head").mouseover(function(){  //$()获取节点
	$("#left").fadeIn(2000);  //fadeIn是jq一个显示效果(渐现) 也是为了让Head显示只是方式不同而已
})

下来还是要写一个开关这次我们将开关封装起来

var isIndom = flase; //定义全部变量 isIndom(开关)
function switch0(){
	$("#left").mouseover(function(){
		isIndom = true;
	});
	$("#left").mouseout(function(){
		isIndom = false;
		$("#left").fadeOut(1000);
	});
}
switch0函数所执行出来的isIndom就是我们要的值
最后写鼠标移出Head事件
$("#head").mouseout(function(){
	switch0();  //先执行switch0函数  得到isIndom的值
	setTimeout(function(){
		if(!isIndom){
			$("#left").fadeOut(1000); //fadeOut()和fadeIn()对应是jq一个消失的效果(渐隐)
		}
	},1000);
})

原生js和jq的延时提醒框 （QQ头像为例）

原生js和jq的延时提醒框（QQ头像为例）