最近用原生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> 26 var dv = document.getElementById("dv1"); 27 document.getElementById("btn1").onclick = function () { 28 animate(dv, "height", 0) 29 } 30 document.getElementById("btn2").onclick = function () { 31 animate(dv, "height", 200) 32 } 33 34 //兼容代码：获取当前元素样式的值 35 function getStyle(element, attr) { 36 return getComputedStyle ? getComputedStyle(element, null)[attr] : element.currentStyle[attr]; 37 } 38 39 function 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>
先把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，比后面的内容数值高一些，就不会影响了~
如果有什么不对谢谢指正~有好的方法欢迎提出~