调试易

渐入渐出效果，纯JS，函数调用，速度值可随意更改。函数：
// 获取速度值
function getSpeed(s){
//速度值，可随意更改。
switch(s){
case "fast": return 200;
case "normal": return 500;
case "slow": return 1000;
default: return s;
}
}
// 设置透明度
function opacity(node, opc){
if(node.style.opacity != null) {  node.style.opacity = opc; }
else { //for IE
opc *= 100;
var alpha = node.style.filter.match(RegExp("alpha\\(opacity=\\S+\\);"));
node.style.filter = node.style.filter.replace(alpha, "");
node.style.filter += "alpha(opacity="+opc+");";
}
}
// 渐显
function fadeIn(node, speed){
if(speed==null) {  speed = "normal"; }
speed = getSpeed(speed);
var delay = speed / 100;
var opc = 0;
opacity(node, opc);
node.style.display = "";
window.setTimeout(function(){fadeInStep(node,opc,delay);},0);
}
// 渐显过程
function fadeInStep(node,opc,delay){
opc+=0.01;
opacity(node, opc);
if(opc>=1){
return true;
}
window.setTimeout(function(){fadeInStep(node,opc,delay);},delay);
}
// 渐隐
function fadeOut(node, speed){
if(speed==null) {  speed = "normal"; }
speed = getSpeed(speed);
var delay = speed / 100;
var opc = 1;
opacity(node, opc);
node.style.display = "";
window.setTimeout(function(){fadeOutStep(node,opc,delay);},0);
}
// 渐隐过程
function fadeOutStep(node,opc,delay){
opc-=0.01;
opacity(node, opc);
if(opc<=0){
node.style.display = "none";
return true;
}
window.setTimeout(function(){fadeOutStep(node,opc,delay);},delay);
}使用：
<div id="d1">
</div>
<p>隐藏：&nbsp;<span onclick="hide_slow()">slow</span>&nbsp;<span onclick="hide_fast()">fast</span></p>
<p>显示：&nbsp;<span onclick="show_slow()">slow</span>&nbsp;<span onclick="show_fast()">fast</span></p>
<style>
#d1{
background-color: #EEE;
height: 200px;
width: 300px;
}
p span{
cursor: pointer;
}
</style>
<script>
function hide_slow(){
var d1 = document.getElementById("d1");
fadeOut(d1, "slow");
}
function hide_fast(){
var d1 = document.getElementById("d1");
fadeOut(d1, "fast");
}
function show_slow(){
var d1 = document.getElementById("d1");
fadeIn(d1, "slow");
}
function show_fast(){
var d1 = document.getElementById("d1");
fadeIn(d1, "fast");
}
</script>