从下向上缓慢滑出菜单，类似于flash的那种柔和的效果

菜单栏在底部，要求子菜单从从下向上缓慢滑出菜单，类似于flash的那种柔和的效果
我上网找了一下没找到，找到的也不太合适，请问各位高手如何写，谢谢各位了，急用啊

解决方案 »

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

给你参考下.
<!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 src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
</head><body><style>
body{
height:2000px;
width:2000px;
}
#a{
width:300px;
height:100px;
background:red;
}
</style>
<div id='a' style="display:none">menu</div></body>
</html>
<script>
$("#a").slideDown(1000).slideUp(1000);
</script>
上面的方法做不了，还有没有了，可能是我的意思没表达清楚，我要是如：
about us，当鼠标放去时从下往上弹出子菜单，速度要缓慢柔和点的弹出，注意是从下往上弹出，即缓慢张开
假设:
s=s1  //菜单总位移
ID='dropmenu'
pos=t1  //$(dropmenu).offsetTop
tim=nullfunction a(){
   var sTemp=t1+s1-$(dropmenu).offsetTop
   var a=0.5   //0<a<1(向上)  -1<a<0(向下)
   if(sTemp<=Math.abs(a*sTemp*10))
   {
      $(dropmenu).style.top=t1+s1
      clearTimeout(tim)
      return
   }
   $(dropmenu).style.top=$(dropmenu).offsetTop+sTemp*a
   tim=setTimeout(a,t)
}
这种缓动可以理解为:s=1/2(at*t)  而且a是越来越小其它的缓动原理是一样的,自己想想就出来了...
老大能不能写详细点，我javascript很菜的
借用1L的代码
<!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>test</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
</head><body><style>
#a{
width:300px;
height:100px;
background:red;
position:absolute;
bottom:20px;
left:0px;
}
#b{
width:80px;
height:20px;
position:absolute;
bottom:0px;
left:0px;
}
</style>
<div id='a' style="display:none">
<table width="100%" border=1>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</table>
</div>
<input type=button value="show_menu" onclick="show_menu(this)" id="b" menu="0">
</body>
</html>
<script>
function show_menu(obj){
if(obj.menu=="0"){
obj.menu = "1";
$("#a").slideDown(1000);
}else{
obj.menu = "0";
$("#a").slideUp(1000);
}
}
</script>
<!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=utf-8" />
<title>弹出菜单</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menuContainer").each(function(){
var _this = $(this);
var o_menu = _this.find("#menu");
var o_list = _this.find("#list"); var listheight = 20 * o_list.find("li").length; //计算菜单列高度 //设定单个li高度为20
o_list.css("marginTop",0-listheight+"px");

o_menu.click(function(){
o_list.slideToggle("1000");
});
});
});
</script>
<style type="text/css">
#container{
height:20px;
margin-top:400px;
}
.menuContainer{
width:100px;
height:20px;
float:left;
margin-left:10px;
}
.menuContainer #list{
position:absolute;
width:100px;
background-color:#CCCC33;
}
.menuContainer #list ul{
width:100px;
list-style:none;
margin:0px;
padding:0px;
}
.menuContainer #list li{
width:100px;
height:20px;
text-align:left;
}
.menuContainer #menu{
height:20px;
text-align:center;
cursor:pointer;
background-color:#99CCFF;
}
</style>
</head><body>
<div id="container">

    <div class="menuContainer">
     <div id="list">
            <ul>
                <li>001</li>
                <li>002</li>
                <li>003</li>
                <li>004</li>
                <li>005</li>
                <li>006</li>
                <li>007</li>
                <li>008</li>
                <li>009</li>
                <li>010</li>
                <li>011</li>
                <li>012</li>
                <li>013</li>
                <li>014</li>
                <li>015</li>
            </ul>
        </div>
        <div id="menu">
         菜单1
        </div>
    </div>

    <div class="menuContainer">
     <div id="list">
            <ul>
                <li>001</li>
                <li>002</li>
                <li>003</li>
                <li>004</li>
                <li>005</li>
                <li>006</li>
                <li>007</li>
                <li>008</li>
            </ul>
        </div>
        <div id="menu">
         菜单2
        </div>
    </div>
</div>
</body>
</html>
IE,FF测试通过
<!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>test</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
</head><body><style>
#a{
width:100px;
height:100px;
background:red;
position:absolute;
bottom:20px;
left:0px;
}
.menu{
width:80px;
height:20px;
position:absolute;
bottom:0px;
left:0px;
background:#ccc;
text-align:center;
}
</style>
<div id='a' style="display:none">
<table width="100%" cellpadding=0 cellspacing=0 border=0 onmouseover="show_menu()" onmouseout="flag = true;window.setTimeout('hidden_menu()',1000)">
<tr height="25px" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='red'"><td>菜单1</td></tr>
<tr height="25px" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='red'"><td>菜单2</td></tr>
<tr height="25px" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='red'"><td>菜单3</td></tr>
<tr height="25px" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='red'"><td>菜单4</td></tr>
</table>
</div>
<div class="menu" onmouseover="show_menu()" onmouseout="flag = true;window.setTimeout('hidden_menu()',1000)">菜单</div>
</body>
</html>
<script>
var flag = true;
function show_menu(){
flag = false;
$("#a").slideDown(1000);
}
function hidden_menu(){
if(flag){
$("#a").slideUp(1000);
}
}
</script>