jquery - jQuery slideToggle在带有thead和tbody元素的表上。没有动画。

我有一张桌子，上面有桌子和车身部分。我已经成功地在上面应用了一个幻灯片切换，但是动画被破坏了。
当用户单击thead时，我希望tbody的内容向上滑动。目前所发生的是该部分只是消失，没有任何动画。
这是桌子

<table>
  <thead>
    <tr>
      <td colspan="3">TABLE HEADING</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="first" colspan="1">Cell Contents</td>
      <td colspan="1">Cell Contents</td>
      <td colspan="1">Cell Contents</td>
    </tr>
  </tbody>
</table>

下面是我使用的jquery：

   <script type="text/javascript" language="javascript">
      $(document).ready(function () {
         $("thead").click(function () {
               $(this).next("tbody").slideToggle("slow");
            }
         )
      });
   </script>

最佳答案

它会消失，因为不管您用CSS将其高度设置为什么，<tbody>通常不会比最高的td短。
这就是自然高度tbody似乎消失的原因，而具有人工额外高度的则会一直运行，直到tr达到其自然高度。
你可以用tbody {display:block;}来绕过这个问题。See the kludge at jsFiddle.
但是，notice the effect that has when a table height is set.
最好的方法可能是将整个表包装在一个DIV和slideToggle中，如下所示：

<table class="AbbyNormal">
    <thead><tr><td colspan="3">TABLE HEADING</td></tr></thead>
</table>
<div class="tableWrap">
    <table class="AbbyNormal">
      <tbody>
        <tr>
            <td class="first" colspan="1">Cell Contents</td>
            <td colspan="1">Cell Contents</td>
            <td colspan="1">Cell Contents</td>
        </tr>
      </tbody>
    </table>
</div>

只要确定并固定桌子宽度相同。
See it in action at jsFiddle.