看到JQ里好多好多的动画效果，我可没空去学那个东西；看了一些网上类似的DEMO，自己也写了一个哈````

下面是JS文件

function $$(pId){
return document.getElementsByClassName(pId);
}
function $(pId){
return document.getElementById(pId);
}

//动画展开效果
         function $DH1(obj){
          var h=obj.offsetHeight;
          var maxh=100;
          function dmove(){
            h+=20; //设置层展开的速度
            if(h>=maxh){
              obj.style.height=maxh+'px';
              clearInterval(iIntervalId);
            }else{
              obj.style.display='block';
              obj.style.height=h+'px';
            }
          }
          iIntervalId=setInterval(dmove,10);
        }

        //动画收缩效果
        function $DH2(obj){
          var h=obj.offsetHeight;
          var maxh=100;
          function dmove(){
            h-=20;//设置层收缩的速度
            if(h<=0){
              obj.style.display='none';
              clearInterval(iIntervalId);
            }else{
              obj.style.display='block';
              obj.style.height=h+'px';
            }
          }
          iIntervalId=setInterval(dmove,10);
        }
       
        function xsyc(obj)
        {
            if($(obj).style.display != "block")
            {
                $DH1($(obj));// $(obj).style.display = "block";
            }
            else
            {
                 $DH2($(obj));//$(obj).style.display = "none";
            }
        }

2、下面是HTML页面了

    <div id="Div_File" runat="server" style="display: none; left: 150px; top: 100px;
        border-width: 3px; border-color: #B3D9D9; border-style: solid; position: absolute;
        z-index: 10000; background-color: #D1E9E9; cursor: wait; width: 500px; height: 75px;
        vertical-align: middle; padding: 10px 10px 10px 10px;font-family:宋体;">
        <br />
      

     6月7日，《新闻联播》播出新闻《高考第一天 考场内外贴心服务》，内容为高考第一天社会各界为保证高考考生有一个良好的应考状态所做的各种努力。节目当中的街头画面当中出现了一年前的过期资料画面，引起了广大观众和网民的质疑和批评。

         <br /><div style="color:Red;width:100%;text-align:left;">提示您：XXXXXXXXXXXXXXXXXXX</div><br />
         <div style="color:Red;width:100%;text-align:right;"><a onclick="xsyc('d_img');" href="javascript:void(0);">显示/隐藏</a></div>
        <br />
        <div id="d_img" style="display:none;">
        <img src="http://www.baidu.com/img/baidu_logo.gif" broder="0px" style="width:100%;text-align:left;"/></div>
    </div>

一个简单的动画效果就实现啦

欢迎提出建议！