以前也遇到過這種問題，就是做簡單的動畫的時候，經常閃退，這次又遇到了，就總結一下。
先來看一下mouseover和mouseenter的區別
下面的效果是我都是觸發一次的效果。
結果就是mouseover會在移進的時候觸發一次，在移出的時候又觸發一次，那就是兩次，沒法實現順暢的移進移出效果。
mouseenter 就是移進的時候觸發那一次。
上面的代碼也放一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.over{
background-color: #66d3ff;
width:400px;
float:left;
padding: 10px 10px;
}
.enter{
background-color: #66d3ff;
width:400px;
float:left;
margin-left:30px;
padding: 10px 10px;
}
h2{
background-color: #fff;
padding: 5px 5px;
}
</style>
</head>
<body>
<p>mouseover 事件:不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。</p>
<p>mouseenter 事件:只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。</p>
<div class="over">
<h2>被觸發的 Mouseover 事件次數：<span></span></h2>
</div>
<div class="enter">
<h2>被觸發的 Mouseenter 事件次數：<span></span></h2>
</div>
</body>
</html>js：
var x = 0,y = 0;
var div1 = document.getElementsByClassName("over")[0];
div1.addEventListener("mouseover",function(){
var span = this.getElementsByTagName("span")[0];
span.innerText = (x +=1);
},false);
var div2 = document.getElementsByClassName("enter")[0];
div2.addEventListener("mouseenter",function(){
var span = this.getElementsByTagName("span")[0];
span.innerText = (y +=1);
},false);然後自己就可以做一個小demo啦
效果就是單獨的兩個div，放在A上面 B出現，移出A的作用域 B就是消失，過程很流暢，可以試一下。
Html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
#a{
margin-top: 40px;
background-color: pink;
color:#000;
height:300px;
width:100px;
text-align:center;
position: relative;
}
#b{
display:none;
background-color:#ccc;
color:red;
height:400px;
width:200px;
text-align:center;
position:absolute;
top:0;
left: 100px;
}
</style>
</head>
<body>
<div>
<div id="a" onmouseenter="a()" onmouseleave="c()">我是A</div>
<div id="b" onmouseenter="b()" onmouseleave="c()">我是B</div>
</div>
</body>
</html>js：
var timer=null;
function a(){
if(timer){
clearTimeout(timer);
}
if($("#b").is(":hidden")){
$("#b").show();
}
}
function b(){
clearTimeout(timer);
}
function c(){
timer=setTimeout(function () {
$("#b").hide();
},100)
}
就醬 