jquery - トグルを使用してtbodyタグを表示するときに、jQueryがtbodyの背景色と一時的に境界線を重ならないようにするにはどうすればよいですか?

Question

一度に複数の行を表示および非表示にできるように、tbody タグを使用してテーブル行をグループ化しています。<tbody2番目の>に背景色がない場合、トグルアニメーションは正常に機能しますが、背景色を追加するとすぐに、正しい位置に戻る前に、背景色が境界線に一時的に重なります。これにより、境界線が再出現する前に事実上消えてしまうという望ましくない効果が生じます。

これは JS Fiddle の例です。

これは、table タグ内の構造です。

<tbody class='tbody1'>
    <tr class='tr1'>
        <td>Test1</td>
        <td>Test2</td>
        <td>Test3</td>
        <td>Test4</td>
    </tr>
</tbody>
<tbody class='tbody2'>
    <tr class='tr2'>
        <td>Test1</td>
        <td>Test2</td>
        <td>Test3</td>
        <td>Test4</td>
    </tr>
    <tr class='tr3'>
        <td>Test1</td>
        <td>Test2</td>
        <td>Test3</td>
        <td>Test4</td>
    </tr>
</tbody>

CSS:

body{
    background-color: rgb(228, 228, 228);;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
.tbody{
    border: 1px solid rgba(0,0,0,0); /* to prevent border sizing inconsistency */
    background-color: rgb(243,243,243);
}
.tbody1 {
    border: 1px solid green;
}
.tbody2{
    display: none;
    border: 1px solid black;
}

jQuery:

$('.tbody1').click(function(){
    $('.tbody2').toggle(1000);
});