分享js函数——滑动渐隐和滑动渐显

Question

// 获取速度值
function getSpeed(s){
//速度值，可随意更改。
switch(s){
case "fast": return 200;
case "normal": return 500;
case "slow": return 1000;
default: return s;
}
}
// 向上滑动隐藏
function slideUp(node, speed){
//参数：node节点，speed速度
if(node.style.display == "none") return false; //如果已经隐藏则不进行任何操作立即返回
if(speed==null) {  speed = "normal"; } //speed默认为normal
speed = getSpeed(speed); //获取speed值
var height = node.offsetHeight; //获取元素实际的高度
var delay = (speed / height);
//计算更改高度值的时间(每像素花费多长时间)
node.style.height = height + "px"; //设置初始高度
window.setTimeout(function(){slideUpStep(node, height, height, delay);}, 0);
}
function slideUpStep(node, h, height, delay){
//参数：node节点，h每一步的高度，原来的高度，延时
if(h<0){ //高度小于0的时候结束，设置回初始的高度并隐藏
node.style.display = "none";
node.style.height = height + "px";
return;
}
//设置高度，每一次减1
node.style.height = h + "px";
h -= 1;
window.setTimeout(function(){slideUpStep(node, h, height, delay);}, delay);
}
// 向下滑动显示
function slideDown(node, speed){
if(node.style.display != "none") return true;
if(speed==null) {  speed = "normal"; }
speed = getSpeed(speed);
var height = node.style.height;
height = height.replace(/px/, "");
node.style.height = 0 + "px";
node.style.display = "";
var delay = speed / height;
window.setTimeout(function(){slideDownStep(node, 0, height, delay);}, 0);
}
function slideDownStep(node, h, height, delay){
if(h>height) return true;
node.style.height = h + "px";
h += 1;
window.setTimeout(function(){slideDownStep(node, h, height, delay);}, delay);
}
// 滑动切换
function slideToggle(node, speed){
if(node.style.display != "none") slideUp(node, speed);
else slideDown(node, speed);
}<p><span onclick="slideUp(this)">slideUp</span><span onclick="slideDown(this)">slideDown</span></p>如果你有更好的方法，欢迎分享。