Javascript 使用jquery设置表格动画（如果可能）

我的代码显示动态创建的不同长度的表，带有显示/隐藏额外表行的“展开”和“压缩”按钮。它能用，但很难看。我很想给它做动画，但显然那是不可能的。这可能是的一个副本，在这种情况下，请随意关闭它，但那是四年前的事了，我希望可能有一个新的/更好的解决方案（我无法让它们工作，但我可以继续尝试）。如果动画不是一个选项，也许有人可以建议一些其他的设计功能，可能看起来不错

$(document).ready(function(){
    $('.table').each(function(){
        $(this).find("tr:even").addClass("even");
        $(this).find("tr:odd").addClass("odd");
        var numShown = 2; // Initial rows shown & index

        var $table = $(this).find('tbody');  // tbody containing all the rows
        var numRows = $table.find('tr').length; // Total # rows
        var tableWidth = $table.find('tr:first td').length;
        var expandDiv = '<tbody class="more"><tr><td colspan="' +
                           tableWidth + '"><div>Show More</div</tbody></td></tr>';
        var condenseDiv = '<tbody class="less"><tr><td colspan="' + $table.find('tr:first td').length + '"><div>Show Less</div</tbody></td></tr>';
        if(numRows>numShown){
            $(function () {
                // Hide rows and add clickable div
                $table.find('tr:gt(' + (numShown - 1) + ')').hide().end()
                    .after(expandDiv);

            })          
        };
        $(this).on('click', '.more', (function() {
            // numShown = numShown + numMore;
            $(this).remove();
            $table.find('tr').show();   
            $table.after(condenseDiv);
        }));
        $(this).on('click', '.less', (function() {
            $table.find('tr:gt(' + (numShown - 1) + ')').hide().end()
                .after(expandDiv);
            $(this).remove();    
        })
        )

    });
});

$（文档）.ready（函数（）{
$（'.table'）。每个（函数（）{
$（this.find（“tr:even”）.addClass（“even”）；
$（this.find（“tr:odd”）.addClass（“odd”）；
var numShown=2；//显示初始行和索引
var$table=$（this）.find（'tbody'）；//包含所有行的tbody
var numRows=$table.find（'tr'）.length；//总计行数
var tableWidth=$table.find（'tr:first td'）.length；
var expandDiv='Show More我不知道如何折叠表的某些部分，但我以前做过类似的事情：

   <div onclick="$('#myTable').toggle(300)">
      Name of table here
      <div id="myTable">
        <table>
          <tr><td>I am a cell</td></tr>
          <tr><td>I am another cell</td></tr>
        </table>
      </div>
    </div>


这里的表名
我是一个手机
我是另一个细胞

这将创建一个div，单击标题可展开/折叠表格。这与您要查找的内容接近吗？
看起来像是将表格包装在一个div中，并且.animate（）或.slide**对某些人有用。是的，我在理解/实现它方面遇到了困难（这是非常新的）所以，在我投入太多时间之前，我想看看是否有一个更先进的解决方案。我会继续尝试。是的，我会说尝试制作一个JSFIDLE，看看它是否有效。我想对我的动画有更多的控制，所以我会使用jquery.animate（）。你可以从0高度开始，然后转到100px或任何你想做的事情，这是css的一个更精细的控制。不完全是--我设置了它，这样它只显示前几行，直到你单击“显示更多”（然后单击“显示更少”隐藏它们）。它可以工作，但我想用幻灯片来美化它。