クラスの付与の際にフェードインする動作の作り方

ここに実現したいことを箇条書きで書いてください。
タブの切り替え時に要素の切り替えはできたが、その要素をフェードインすることができなかった。
このコードではTab-Aを押した時にContent-Aが下から上に出現するコードを書きたい。

該当のソースコード

html <!--タブ--> <ul class="tab-group"> <li class="tab is-active">Tab-A</li> <li class="tab">Tab-B</li> <li class="tab">Tab-C</li> </ul> <!--タブを切り替えて表示するコンテンツ--> <div class="panel-group"> <div class="panel is-show">Content-A</div> <div class="panel">Content-B</div> <div class="panel">Content-C</div> </div> css .tab-group{ display: flex; justify-content: center; } .tab{ flex-grow: 1; padding:5px; list-style:none; border:solid 1px #CCC; text-align:center; cursor:pointer; } .panel-group{ height:100px; border:solid 1px #CCC; border-top:none; background:#eee; } .panel{ display:none; } .tab.is-active{ background:#F00; color:#FFF; transition: all 0.2s ease-out; } .panel.is-show{ display:block; } jQuery jQuery(function($){ $('.tab').click(function(){ $('.is-active').removeClass('is-active'); $(this).addClass('is-active'); $('.is-show').removeClass('is-show'); // クリックしたタブからインデックス番号を取得 const index = $(this).index(); // クリックしたタブと同じインデックス番号をもつコンテンツを表 $('.panel').eq(index).addClass('is-show'); }); });

試したこと

$(this).hide().fadeIn();をjQueryの五段目の次に入れましたが動作しませんでした。