JS怎么写缓缓展开那种渐变过渡效果的。

今天写了一个收缩 展开的效果
但是中间那个渐变效果不知道用什么方法写 用settimeout和setinterval吧 好像不能终止。
就是那种能缓缓展开和缓缓收缩的过渡效果  用JS写  还不会jquery那类的包<!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>
<style>
#aa{width:500px;height:30px;line-height:30px;background:red;}
#bb{width:500px;height:300px;background:yellow;}
#saa{float:right;color:#FFF;font-weight:bold;cursor:pointer;}
.a1{background:black;width:50px;height:30px;}
.a2{background:blue;width:50px;height:30px;}
</style>
</head><body>
<div id="aa"><span id="saa" class="a1"></span></div>
<div id="bb"></div>
<div style="width:500px;height:300px;background:green;"></div>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
var bb=document.getElementById('bb');
var b=300;
function aaa(){
if(b<300){
b+=10;
    bb.style.height=b+"px";
}}
function bbb(){
if(b>0){
b-=10;
    bb.style.height=b+"px";}
}$('saa').onclick=function(){
if($('saa').className=="a1"){
$("bb").style.display="none";
//setTimeout("bbb()",1000);
$('saa').className="a2";
}
else{
$("bb").style.display="block";
//setTimeout("aaa()",1000);
$('saa').className="a1";
}
}
</script></body>
</html>

解决方案 »

  1.   

    用jquery的方法show(毫秒),hide（毫秒）
      

  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>
    <style>
    #aa {
    width: 500px;
    height: 30px;
    line-height: 30px;
    background: red;
    }

    #bb {
    width: 500px;
    height: 300px;
    background: yellow;
    }

    #saa {
    float: right;
    color: #FFF;
    font-weight: bold;
    cursor: pointer;
    }

    .a1 {
    background: black;
    width: 50px;
    height: 30px;
    }

    .a2 {
    background: blue;
    width: 50px;
    height: 30px;
    }
    </style>
    </head> <body>
    <div id="aa">
    <span id="saa" class="a1"></span>
    </div>
    <div id="bb"></div>
    <div style="width: 500px; height: 300px; background: green; display: none;"></div>
    <script type="text/javascript">
    function $(id){return document.getElementById(id)}

    var b = 300;
    function aaa() {
    var bb = document.getElementById('bb');
        if(b <= 300) {
        b += 5;
        if (b > 300) {return;}
        bb.style.height = b+"px";
    }
    setTimeout("aaa()", 50);
    }
    function bbb(){
    var bb = document.getElementById('bb');
        if(b >= 0){
        b -= 5;
        if (b < 0) {return;}
        bb.style.height = b+"px";
        }
        setTimeout("bbb()", 50);
    }

    $('saa').onclick = function() {
        if($('saa').className == "a1"){
         //$("bb").style.display = "none";
         $('saa').className = "a2";
         //setTimeout("bbb()",1000);
         bbb();
        } else {        
        //$("bb").style.display = "block";
        $('saa').className = "a1";
        //setTimeout("aaa()",1000);
        aaa();
        }     
     }
    </script> </body>
    </html>
      

  3.   

    不是吧,JavaScript直接写难的会,jquery简单就不会啦?
      

  4.   

    1楼和3楼的  我就是想知道JS怎么直接写  我只是想把基础的学好一点 再看jquery和extjs之类的js包
      

  5.   

    settimeout就可以了
    渐变的方法主体是 settimeout
    但是 还要考虑 
    速度（起始和终止之间的变化）,节奏(settimeout的运行间隔)，起始，终止，停止。。等控制信号var MyThread={
        speed:10      //速度
        ,Rhythm:100    //节奏
        ,status:run|stop|end       //当前运行的状态
        ,start:       //起始
        ,end:         //终止
        ,now:         //当前数值
        ,run:function(){
             //检查状态 根据不同状态作出控制
             //根据速度计算起始和终止间的当前数值
             //根据当前数值控制显示
             //根据节奏控制下次的调用
        }
    }
    最后调用run就可以了 通过信号值的设置来控制运行状态