div层慢慢变透明并最后隐藏的效果！

<style type="text/css">
#div_test {
width: 100px;
height: 100px;
background-color: #000000;
filter:Alpha(Opacity=100)
}
</style><script type="text/javascript">

var i = 100;

function $(id) {return document.getElementById(id);}

function chang_display() {
i--;
var div = $('div_test');
div.style.filter = "Alpha(Opacity="+i+")";
div.style.opacity = i / 100;
}
function hid() {
setInterval(chang_display, 1);
}
</script>
<div id="div_test" width="60" height="60" onmouseover="hid()" />

解决方案 »

  1.   

    楼上的解答已基本解答，但需要注意一点，setInterval定时器执行后，何时退出？
    所以在chang_display函数中，加个判断，if i=0  就退出!
      

  2.   

    效果出来了，但我用IE developer看了一下Opacity一直在后台减，停不下来，加了if i=0 exit后停下来了，但是
    没有隐藏div,挡住了后面内容，结合楼上两位想法，我改进了一下：<style type="text/css"> 
    body {margin:0;padding:0;color:#000000;}
    #div_test { 
    width: 100%; 
    height: 100%; 
    background-color: #000000;
    position:absolute;
    filter:Alpha(Opacity=100) 
    } 
    </style>
    <script type="text/javascript"> 
    var i = 100; 
    function $(id) {return document.getElementById(id);} 
    function chang_display() { i--; 
    var div = $('div_test'); 
    div.style.filter = "Alpha(Opacity="+i+")"; 
    div.style.opacity = i / 100; 
    if ( i== "0")
    {document.getElementById('div_test').style.display="none";//隐藏
    exit
    }} 
    function hid() { 
    setInterval(chang_display, 1);
    }</script> <body>
    <div id="div_test" onmouseover="hid()"></div>
    <div><a href="http://bbs.csdn.com">123</a>123123</div>
    </body>终于得到想要的效果了，最后，谢谢二位！