js如何实现鼠标经过与离开div,执行渐变的效果！急！！

想实现 当鼠标经过div时 栏目标题先向上移动，然后慢慢显示内容出来，当鼠标离开div时按相反的动作效果执行
但我做的效果并不理想。请高手更改实现急！！！ 
<!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 isMouseLeaveOrEnter(e, handler) {     
    if (e.type != 'mouseout' && e.type != 'mouseover') return false;     
    var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;     
    while (reltg && reltg != handler)     
        reltg = reltg.parentNode;     
    return (reltg != handler);     
}  var start1;
var start2;
    function showMenu()
    {
      start1=window.setInterval("shoppingcat()",80);        
    }   
        function shoppingcat()
        {  
        var s=2;
        var divObj=document.getElementById('up1'); 
        var divObjs=document.getElementById('down1');        
        var aa=parseInt(divObj.style.marginTop);
        var bb=parseInt(divObj.style.marginBottom);
        if(aa>=0)
        {
        divObj.style.marginTop=aa-s;
            if(aa==0)
            {
            window.clearInterval(start1);          
            divObj.style.marginBottom=5+"px";
            divObjs.style.display="block";
            moveLeft();
            }
        }
        }
        //内容 逐渐显示出来
  var distance=0;
  var moveLeft=function(){
     distance=0;  //初始值为0
     var obj1=document.getElementById('front1');
     var width=obj1.offsetWidth;
     var height=obj1.offsetHeight;
     moveLeft.obj=obj1;
     start2=window.setInterval('move('+height+')',240);
}function move(height)
{
        if(distance<height)
        {
            distance+=4;  //每次调用 增加 4
            moveLeft.obj.style.top=parseInt(moveLeft.obj.style.top)+distance+'px';
        }
        else if(distance>height)
        {     
        window.clearInterval(start2);    
       }
}    var end1;
var end2;
var distances=0;
  var closeMenu=function(){
      distances=0;  //初始值为0
     var obj1=document.getElementById('front1');
     obj1.style.top=distance+"px";     closeMenu.obj=obj1;
   end1=window.setInterval("moveOut()",120); // 表示向上   
}function moveOut()
{
    if(distances<distance)
    {
        distances+=4;  //每次调用 增加 4
        closeMenu.obj.style.top=distance-distances+'px';
    }
    else
    {     
      window.clearInterval(end1);    
      end2=window.setInterval("shoppingcats()",80);
   }
}    
        var _s=0; 
  function shoppingcats()
        {  
        var _divObj=document.getElementById('up1');
        var _divObjs=document.getElementById('down1');     
        var _aa=parseInt(_divObj.style.marginTop);
        var _bb=parseInt(_divObj.style.marginBottom);
        
        if(_s<10)
        {
        _s=_s+2;
        _divObj.style.marginTop=_s+"px";
            if(_s==10)
            {
            window.clearInterval(end2);              
            _divObj.style.marginBottom=60+"px";
            if(_divObjs.style.display="block"){
            _divObjs.style.display="none";
            }
            }
        }
        } 
    </script>
</head><body>
              <div style="width:236px; height:159px; display:block; border:1px solid #003399; font-size:12px;" onmouseover="if (isMouseLeaveOrEnter(event,this))showMenu();" onmouseout="if (isMouseLeaveOrEnter(event,this))closeMenu();">
        <table width="236" height="159" border="0" cellpadding="0" cellspacing="0" background="img/kbg.jpg">
          <tr>
            <td valign="top"><table width="211" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td height="15"><img src="img/1.gif" width="1" height="1" /></td>
              </tr>
              <tr>
                <td><table width="211" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="106" height="129"><a href="about.aspx?id=1"><img src="img/kuaiimg/m-1.jpg" width="90" height="112" border="0" alt="左边图片"/></a></td>
                    <td>
                    
                    <div>
                    <div id="up1" style="margin-top:10px;margin-bottom:60px;"><a href="about.aspx?id=1"><img src="img/kuaiimg/l-1.jpg" width="92" height="22" border="0" alt="栏目标题"/></a></div>
                       <div id='down1' style='background:#FFF;width:100px;height:90px;position:relative;overflow:hidden; display:none;'>
                          <div id='front1' style='position:absolute;left:0;top:0;width:100px;height:90px;background:#FFFFFF;z-index:10;'>&nbsp;</div>
                          <div id='back1' style='position:absolute;left:0;top:0;width:100px;height:80px;background:#FFFFFF;z-index:9;'>
                           <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="15"><img src="img/bit.gif" width="3" height="3" align="absmiddle" /> <span class="STYLE1"><a href="about.aspx?id=1" class="STYLE1">公司动态</a></span></td>
                      </tr>
                      <tr>
                        <td background="img/line.jpg"><img src="img/line.jpg" width="6" height="1" /></td>
                      </tr>
                      <tr>
                        <td height="15"><img src="img/bit.gif" width="3" height="3" align="absmiddle" /> <span class="STYLE1"><a href="about.aspx?id=5" class="STYLE1">发展历程</a></span></td>
                      </tr>
                      <tr>
                        <td background="img/line.jpg"><img src="img/line.jpg" width="6" height="1" /></td>
                      </tr>
                      <tr>
                        <td height="15"><img src="img/bit.gif" width="3" height="3" align="absmiddle" /> <span class="STYLE1"><a href="about.aspx?id=6" class="STYLE1">行业新闻</a></span></td>
                      </tr>
                      <tr>
                        <td background="img/line.jpg"><img src="img/line.jpg" width="6" height="1" /></td>
                      </tr>
                      <tr>
                        <td height="15"><img src="img/bit.gif" width="3" height="3" align="absmiddle" /> <span class="STYLE1"><a href="about.aspx?id=7" class="STYLE1">下属机构</a></span></td>
                      </tr>
                      <tr>
                        <td background="img/line.jpg"><img src="img/line.jpg" width="6" height="1" /></td>
                      </tr>
                    </table>
                          </div>
                       </div>
                    </div>
                   
                    </td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
        </table>
        </div>
</body>
</html>

解决方案 »

  1.   

    这么长也不想看。
    你可以设计下用div 的overflow hidden就是超出隐藏。不停的改变DIV的大小。
      

  2.   

    你的代码，能不能加个 [code]啊。。这样，很乱的！
      

  3.   

    鼠标移动事件不应该加在大div上，放在小的div上这样应该可以实现你的！
    也就是div=up1 div=down1
      

  4.   

    用juqery sildeUp() sildeDown()
      

  5.   


    不会juqery....  看来得先去 研究研究下 才行
      

  6.   


    可是要求实现的效果 就是 这样的。。经过大div  触发小div动作。。 而且还要反复，一上一下，一展开一隐藏 懵了我！！