jquery导航式弹出菜单问题，熟悉animate进

<!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="jquery-1.7.js" type="text/javascript">
</script>
<style type="text/css">
<!--
.STYLE1 {color: #FFFFFF}
#Layer1 {
position:absolute;
width:100px;
height:215px;
z-index:1;
background-color: #009900;
}
-->
</style>
<script type="text/javascript">
 $(document).ready(function()
  {
     $("#tb1").hide();
 $("#Layer1").height("0px");
 $("#td1").mouseover(function()
 {
   $("tb1").show(300);
   $("#Layer1").animate({height:"215px"},300);
 });
 $("#td1").mouseout(function()
 {
   $("tb1").hide(300);
   $("#Layer1").animate({height:"0px"},300);
 });
  });
</script>
</head><body>
<table width="702" border="0" cellpadding="0" cellspacing="0" bgcolor="#006699">
  <tr>
    <td><table width="700" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100" height="30" id="td1"><div align="center" class="STYLE1">要闻</div></td>
        <td width="100">&nbsp;</td>
        <td width="100">&nbsp;</td>
        <td width="100">&nbsp;</td>
        <td width="100">&nbsp;</td>
        <td width="100">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div id="Layer1">
          <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tb1">
            <tr>
              <td>项目0</td>
            </tr>
            <tr>
              <td><div align="center">项目１</div></td>
            </tr>
            <tr>
              <td><div align="center">项目２</div></td>
            </tr>
            <tr>
              <td><div align="center">项目３</div></td>
            </tr>
            <tr>
              <td><div align="center">项目４</div></td>
            </tr>
            <tr>
              <td><div align="center">项目５</div></td>
            </tr>
            <tr>
              <td><div align="center">项目６</div></td>
            </tr>
            <tr>
              <td><div align="center">项目７</div></td>
            </tr>
            <tr>
              <td><div align="center">项目８</div></td>
            </tr>
            <tr>
              <td><div align="center">项目９</div></td>
            </tr>
            <tr>
              <td><div align="center">项目１０</div></td>
            </tr>
            <tr>
              <td><div align="center">项目１１</div></td>
            </tr>
          </table>
        </div></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>
想做一个触发式弹出导航菜单的特效，鼠标移动到　要闻上，用300毫秒弹一个下拉菜单１.然后由于弹出层内有table，我即使让Layer1的高度为0,table还是会显示，只好用障眼法把table暂时隐藏。有没有更好的处理办法２.这代码hide掉table就再也show不出来了。３.　mouseover触发animate效果不稳定。菜单上来下去翻腾好几次才听，你妹的。

解决方案 »

  1.   

    1、针对第一种情况LZ你可以试试slideDown、slideUp同样也是弹出式的：
    <script type="text/javascript">
     $(document).ready(function()
      {
    $("#Layer1").hide();
    $("#td1").mouseover(function()
    {
        $("#Layer1").slideDown(300);
    });
    $("#td1").mouseout(function()
    {
      $("#Layer1").slideUp(300);
    });
      });
    </script>2、$("#td1").mouseover(function()
    {
    $("tb1").show(300);   //语法写错了
    $("#Layer1").animate({height:"215px"},300);
    });3、在<td width="100" height="30" id="td1"><div align="center" class="STYLE1">要闻</div></td>里面，id="td1"的td里面增加style="line-height:30px".（lz你可以用firebug看下，id="td1"的td的高度没有填满tr，而你的mouseout事件是针对id="td1"鼠标离开的。）
      

  2.   

    我测试过了 
    你把你的脚本改成这个 就行
    <script type="text/javascript">
     $(document).ready(function()
      {
    $("#Layer1").hide();
    $("#td1").hover(function()
    {
    $("#Layer1").slideDown();
    },function(){$("#Layer1").slideUp();});  });
    </script>
      

  3.   

    ３.　mouseover触发animate效果不稳定。菜单上来下去翻腾好几次才听，你妹的。 ...加个 .stop().animate()
      

  4.   

    在animation的callback函数里处理
    mouseenter，mouseleave触发