<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#divMsg{
    width:200px;
    height:200px;
    color:#FFFFFF;
    background-color:#006699;
    line-height:200px;
    text-align:center;
}
</style>
<script type="text/javascript">
function setOpacity(obj, value){
    if(document.all){
        if(value == 100){
            obj.style.filter = "";
        }else{
            obj.style.filter = "alpha(opacity=" + value + ")";    
        }
    }else{
        obj.style.MozOpacity = value / 100;
    }
}
function changeOpacity(obj, startValue, endValue, step, speed){
    if(step > 0 && startValue < endValue || step < 0 && startValue > endValue){
        setOpacity(obj, endValue);
        return;
    }
    setOpacity(obj, startValue);
    setTimeout(function(){changeOpacity(obj, startValue-step, endValue, step, speed);}, speed);
}
function showMsg(){
    var msg = document.getElementById("divMsg");
    var step = 4, speed = 30;
    msg.isShow = !msg.isShow;
    if(!msg.isShow){
        changeOpacity(msg, 0, 100, -step, speed);
    }else{
        changeOpacity(msg, 100, 0, step, speed);
    }
}
</script>
</head><body>
<div id="divMsg">
    测试渐隐/渐显....
</div>
<br />
<input type="button" value=" 显示/隐藏 " onclick="showMsg()" />
</body>
</html>