Javascript 折叠动画效果不起作用（而是溶解）-内部小提琴

我希望在点击“查看更多”时，隐藏小提琴中表格的最后两行，并通过动画向上伸展。我已经设法用代码做到了这一步-

但是动画正在溶解而不是拉伸。 我应该添加什么（最好是最少的代码）来获得这样的效果

另外，HTML、CSS和Jquery方面，整个代码通常是这种情况下的最佳实践吗？

例如，我是否应该将

.hidden

类应用于

tr

我尝试将这两行包装在一个DIV中，并对其应用.hidden类，但没有成功

CSS:

HTML:

---

您不能

slideToggle

table行，它工作不好。我所做的是将每个

td

内容封装在一个div中，并将每个div中的

slideToggle

。请注意，根据单元格的数量和客户端计算机，这应该有点慢

$('.clk').click(function(){
    $('.hidden').toggle(700) // Fade the rows
    $('.hidden td div').slideToggle(700) // Slide the contents
});

---

工作演示：

您想要什么？没有带切换的拉伸，它只切换隐藏/显示。您可以使用slideToggle并将速度设置为低于700毫秒。你看到的“溶解”效果是因为你让它在700毫秒以上发生，请尝试较低的速度。@Macsupport lower speed使它立即弹出，根本没有过渡，我尝试过滑动切换，也没有过渡…@Macsupport我不一定要使用这些功能，如果还有另外一个过渡函数，我很乐意了解它，我想知道是否还有更好的解决方案，因为在测试时，我注意到它会使细胞的内容拉伸，但细胞本身不会同时反应，所以看起来有点滞后，当单元格内部有一些填充时，动画似乎可以正常工作，而不添加任何div，您认为如何？这使动画更清晰，但您可以看到文本本身立即出现，并且表格看起来太大。您也可以用div替换整个表。

  <table border="1">
    <col style="width:115px;" />
    <col style="width:125px;" />
    <col style="width:145px;" />
    <col style="width:125px;" />
    <col style="width:190px;" />
    <thead>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span class="clk">See More</span></td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
      </tr>
      <tr class="hidden">
        <td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
      </tr>
      <tr class="hidden">
        <td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
      </tr>
    </tbody>
  </table>

$(document).ready(function(){
    $('.clk').click(function(){
        $('.hidden').toggle(700)
    });
})

$('.clk').click(function(){
    $('.hidden').toggle(700) // Fade the rows
    $('.hidden td div').slideToggle(700) // Slide the contents
});