〓〓带滑动效果的菜单栏展开与收缩？？？〓〓

<ul>
  <li class="explode" key="menu_47" id="menu_47" name="menu">
    <span title="menu">参与游戏</span>
    <ul>
         <li class="collapse" key="menu_48" id="menu_48" name="menu">
               <span title="menu">数字</span>
               <ul style='display:none;'>
                   <li class="menu-item"><a href="./?curmid=50&pid=50" target="mainframe">100</a></li>
                     <li class="menu-item"><a href="./?curmid=119&pid=119" target="mainframe">200</a></li>
                     <li class="menu-item"><a href="./?curmid=86&pid=86" target="mainframe">300</a></li>
                     <li class="menu-item"><a href="./?curmid=220&pid=220" target="mainframe">400</a></li>
                     <li class="menu-item"><a href="./?curmid=151&pid=151" target="mainframe">500</a></li>
             </ul>
          </li>
          <li class="collapse" key="menu_49" id="menu_49" name="menu">
               <span title="menu">图片</span>
               <ul style='display:none;'>
<li class="menu-item"><a href="./?curmid=174&pid=174" target="mainframe">山水</a></li>
                     <li class="menu-item"><a href="./?curmid=256&pid=256" target="mainframe">人物</a></li>
               </ul>
          </li>
    </ul>
  </li>
</ul>jQuery("#menu-tab").click(function(){
if( jQuery("#toggleImg").attr("src") == "/images/default/menu_minus.gif" ){
jQuery(this).attr("title","展开全部");
jQuery("#toggleImg").attr("src","/highgame/images/default/menu_plus.gif").attr("title","展开全部");
jQuery("li[name='menu']").attr("class","collapse").children("ul").slideUp("fast");
}else{
jQuery(this).attr("title","折叠全部");
jQuery("#toggleImg").attr("src","/highgame/images/default/menu_minus.gif").attr("title","折叠全部");
jQuery("li[name='menu']").attr("class","explode").children("ul").slideDown("fast");
}
});
jQuery("span[title='menu']").click(function(){
if( jQuery(this).parent().attr("class") == "explode" ){
jQuery(this).parent().attr("class","collapse").children("ul").slideUp("fast");
}else{
jQuery(this).parent().attr("class","explode").children("ul").slideDown("fast");
}
});上面是一个框架的左侧菜单栏，我们一般做菜单栏的展开与收缩是直接hidden或display(瞬间收缩与展开)。
但上面是我在一个站点上看到的，它的效果是滑动的展开与收缩，看得到逐渐展开与收缩的效果
大家说是如何做的呢？？？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

hide（50）就会有其他效果了。50代表时间！毫秒
show(500)/hide(500)缓慢展开，隐藏
我想知道的是jQuery是如何实现的
jQuery没用过，我在网上找的一段代码，自己修改了一下，贴上来和大家交流一下。<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可折叠展开收缩效果的栏目分类导航</title>
<style type="text/css">
td {font-size: 12px;}
</style>
</head><body>
<table width="200" height="250" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
   <td align="center" valign="top">
   <script language="javascript" id="clientEventHandlersJS">

      </script>
   <table cellspacing="0" cellpadding="0" width="88%" border="0">
    <tr>
     <td style="PADDING-LEFT: 20px" background height="23">
     <img height="9" width="8" align="absMiddle">
     <a onclick="javascript:ShowFLT(1)" href="javascript:void(null)">
     文管产品</a> </td>
    </tr>
    <tr id="LM1" style="DISPLAY: none">
     <td>
     <table cellspacing="0" cellpadding="0" width="100%" border="0">
      <tr>
       <td style="PADDING-LEFT: 40px" height="23">
       <img height="7"  width="8" align="absMiddle">
       <a title="文件夹" href="#" target="_parent">
       文件夹</a> </td>
      </tr>
      <tr>
       <td background height="3"></td>
      </tr>
      <tr>
       <td style="PADDING-LEFT: 40px" height="23">
       <img height="7"  width="8" align="absMiddle">
       <a title="资料册" href="#" target="_parent">
       资料册</a> </td>
      </tr>
      <tr>
       <td background height="3"></td>
      </tr>
      <tr>
       <td style="PADDING-LEFT: 40px" height="23">
       <img height="7"  width="8" align="absMiddle">
       <a title="档案盒" href="#" target="_parent">
       档案盒</a> </td>
      </tr>
      <tr>
       <td background height="3"></td>
      </tr>
      <tr>
       <td style="PADDING-LEFT: 40px" height="23">
       <img height="7"  width="8" align="absMiddle">
       <a title="文件盒" href="#" target="_parent">
       文件盒</a> </td>
      </tr>
      <tr>
       <td background height="3"></td>
      </tr>
      <tr>
       <td style="PADDING-LEFT: 40px" height="23">
       <img height="7"  width="8" align="absMiddle">
       <a title="文件柜" href="#" target="_parent">
       文件柜</a> </td>
      </tr>
      <tr>
       <td background height="3"></td>
      </tr>
      <tr>
       <td style="PADDING-LEFT: 40px" height="23">
       <img height="7"  width="8" align="absMiddle">
       <a title="公文包" href="#" target="_parent">
       公文包</a> </td>
      </tr>
      <tr>
       <td background height="3"></td>
      </tr>
     </table>
     </td>
    </tr>
    <tr>
     <td style="PADDING-LEFT: 20px" background height="23">
     <img height="9" width="8" align="absMiddle">
     <a onClick="javascript:ShowFLT(2)" href="javascript:void(null)">
     桌面文具</a> </td>
    </tr>
    <tr id="LM2" style="DISPLAY: none">
     <td>
     <table cellspacing="0" cellpadding="0" width="100%" border="0">
      <tr>
       <td style="PADDING-LEFT: 40px" height="23">
       <img height="7"  width="8" align="absMiddle">
       <a title="削笔机" href="#" target="_parent">
       削笔机</a> </td>
      </tr>
      <tr>
       <td background height="3"></td>
      </tr>
      <tr>
       <td style="PADDING-LEFT: 40px" height="23">
       <img height="7"  width="8" align="absMiddle">
       <a title="订书机" href="#" target="_parent">
       订书机</a> </td>
      </tr>
      <tr>
       <td background height="3"></td>
      </tr>
     </table>
     </td>
    </tr>
</table></body>
</html>