最近用原生js做项目练手，自己尝试做了下，可以直接复制代码看效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4<meta charset="utf-8"> 5<title>滑入滑出</title> 6<style> 7 #dv1 {8 height: 0px; 9 overflow: hidden;10 }11 12 #dv2 {13 width: 200px;14 height: 200px;15 background: #ace;16 }17</style>18 </head>19 <body>20 <input type="button" id="btn2" value="点击滑出"/>21 <input type="button" id="btn1" value="点击滑入"/>22 <div id="dv1">23<div id="dv2"></div>24 </div>25 <script>26var dv = document.getElementById("dv1");27document.getElementById("btn1").onclick = function () {28 animate(dv, "height", 0)29}30document.getElementById("btn2").onclick = function () {31 animate(dv, "height", 200)32}33 34//兼容代码：获取当前元素样式的值35function getStyle(element, attr) {36 return getComputedStyle ? getComputedStyle(element, null)[attr] : element.currentStyle[attr];37}38 39function animate(element, attr, target) {40 clearInterval(element.timeId);41 //不清理的话，每一次调用animate这个函数，就会产生一个定时器42 element.timeId = setInterval(function () {43 var current = parseInt(getStyle(element, attr));//返回值是元素样式的值，转换成整数进行下面的计算44 var step = (target - current) / 10;45 step = step > 0 ? Math.ceil(step) : Math.floor(step);46 current += step;47 element.style[attr] = current + "px";48 if (current == target) {49 clearInterval(element.timeId);50 }51 }, 20)52}53 </script>54 </body>55 </html>
View Code
先把html、css部分代码呈上来，我这里是用一个div包裹另一个div，并且最外层的div是设置高度为0的
<style>#dv1 {height: 0px;overflow: hidden;}#dv2 {width: 200px;height: 200px;background: #ace;}</style>
<input type="button" id="btn2" value="点击滑出"/><input type="button" id="btn1" value="点击滑入"/><div id="dv1"><div id="dv2"></div></div>
先写一个兼容ie8的获取元素样式值的函数
function getStyle(element, attr) {return getComputedStyle ? getComputedStyle(element, null)[attr] : element.currentStyle[attr];}
接着写一个变速动画函数
function animate(element, attr, target) {clearInterval(element.timeId);element.timeId = setInterval(function () {var current = parseInt(getStyle(element, attr));var step = (target - current) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);current += step;element.style[attr] = current + "px";if (current == target) {clearInterval(element.timeId);}}, 20)}
接着注册鼠标进入离开事件，改变第一个div的高度即可
var dv = document.getElementById("dv1");document.getElementById("btn1").onclick = function () {animate(dv, "height", 0)}document.getElementById("btn2").onclick = function () {animate(dv, "height", 200)}
实际运用中，会因为隐藏的部分还是会占页面空间，导致鼠标移动到该部分的时候，不能显示完全，所以可以让该部分脱离文档流，绝对定位，并且设置z-index，比后面的内容数值高一些，就不会影响了~
如果有什么不对谢谢指正~有好的方法欢迎提出~
