求一个类似于jquery的slideup,slidedown效果

点击这里进去看效果这个网站右边的4个小图的那种效果。他们是用jquery实现的，现在我想用js实现，求高人指点。

解决方案 »

  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>
    <style>
    body
    {
      margin:0px;
    }
    div.content
    {
     width:300px;
     height:auto;
    }
    .imgcontent
    {
      width:300px;
      height:200px;
    }
    div.slide
    {
     background-color:black;
     filter:alpha(opacity=75);
     opacity:.75;
     width:300px;
     height:30px;
     z-index:99;
     position:absolute;
     top:170px;
     left:0px;
     color:white;
    }
    div.slideUp
    {
     background-color:black;
     filter:alpha(opacity=75);
     opacity:.75;
     width:300px;
     height:30px;
     z-index:99;
     position:absolute;
     top:0px;
     left:0px;
     color:white;
    }
    div.chislide
    {
      width:300px;
      height:170px;
      z-index:99;
      position:absolute;
      top:30px;
      left:0px;
      display:none;
    }
    div.chislideUp
    {
      width:300px;
      height:169px;
      z-index:99;
      position:absolute;
      border-top:#CCFF66 solid 1px;
      top:30px;
      left:0px;
      background-color:black;
      opacity:.75;
      filter:alpha(opacity=75);
    }
    </style>
    <script>
     <!--
      function mouseover()
      {
        document.getElementById('slide').style.className='slideUp';
    document.getElementById('chislide').style.className='chislideUp';
      }
      function mouseout()
      {
        document.getElementById('slide').style.className='slide';
    document.getElementById('chislide').style.className='chislide';
      }
     -->
    </script>
    </head><body>
    <div class="content">
      <div class="imgcontent" id="imgcontent" onmouseover="mouseover()" onmouseout="mouseout()">
         <img src="1.jpg" border="0" class="imgcontent" />
         <div class="slide" id="slide">测试一下效果</div>
     <div class="chislide" id="chislide"></div>
      </div>
      <div><img src="2.jpg" border="0" class="imgcontent" /></div>
      <div><img src="3.jpg" border="0" class="imgcontent" /></div>
      <div><img src="4.jpg" border="0" class="imgcontent" /></div>
    </div>
    </body>
    </html>
      

  2.   

    动画的话肯定要用到setTimeout()。