js让层背景有渐变效果，请高手解答，在先等

<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function aa(){
setbackground("Id");
}
function setbackground(Id){
document.getElementById(Id).style.backgroundColor = '#FFFFFF';
var hexacode = ['#F9F94B', '#FAFA5B', '#FAFA6B','#FBFB7C','#FBFB8C','#FCFC9D','#FCFCAD','#FCFCBD','#FDFDCE','#FEFEDE','#FEFEEF','#FFFFFF'],
    el = document.getElementById(Id).style,
counter = -1,
hexalen = hexacode.length;
function auto(){
el.backgroundColor = hexacode[counter = ++counter];
}
setInterval(auto, 200);
}
</script>
</head><body>
<div id="Id">aaa<div>
<input type="button" value="button" onclick="aa()" />
</body>
</html>

解决方案 »

  1.   

    <!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=gb2312" />
    <title>无标题文档</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript"> 
        $(document).ready(function(){
                //改变div透明度
                $("#btn").click(function(){
                    $("#Id").fadeTo(1000,0);
                });//end    });
        </script>
        </head><body>
    <div id="Id" style="background-color:Green">aaa</div>
    <input type="button" value="button" id="btn" />
    </body>
    </html>
      

  2.   


    <!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=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    var counter = -1;
    var t;
    function aa(){
    counter = -1;
    setbackground("Id");
    }
    function setbackground(Id){
    document.getElementById(Id).style.backgroundColor = '#FFFFFF';
    var hexacode = ['#F9F94B', '#FAFA5B', '#FAFA6B','#FBFB7C','#FBFB8C','#FCFC9D','#FCFCAD','#FCFCBD','#FDFDCE','#FEFEDE','#FEFEEF','#FFFFFF'],
      el = document.getElementById(Id).style,hexalen = hexacode.length;
    function auto(){
    if(counter>=hexacode.length-1&&t){
    clearInterval(t);
    t=undefined;
    }
    el.backgroundColor = hexacode[++counter];
    }
    document.title=typeof(t);
    if(!t)
    t=setInterval(auto, 200);
    }
    </script>
    </head><body>
    <div id="Id">aaa<div>
    <input type="button" value="button" onclick="aa()" />
    </body>
    </html>
    不得不说LZ的代码还有很多地方需要改进。
     我没一一写
     总之这个能用了