javascript - jquery でテーブルをアニメーション化する (可能であれば)

Question

追加のテーブル行を表示/非表示にする「展開」ボタンと「圧縮」ボタンを使用して、動的に作成されたさまざまな長さのテーブルを表示するコードがあります。動作しますが、醜いです。アニメ化したいのですが、どうやら無理そうです。これはおそらく、表の行で SlideDown (または show) 関数を使用する方法の複製ですか? 、その場合はお気軽に閉じてください。ただし、それは 4 年前のものであり、新しい/より良い解決策があることを望んでいました (それらを機能させることはできませんでしたが、試し続けることができます)。アニメーション化がオプションではない場合、誰かが適切に見える他のデザイン機能を提案できますか?

$(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();    
        })
        )

    });
});