淡入加载更多按钮

Question

我有一个简单的功能，在点击时显示10个表行但是我很难让它们淡入，当点击按钮我需要行淡入而不仅仅是内容是我只是能够上班。行样式只会立即显示，但内容会淡入。

＆＃13;

＆＃13;

$('table tr:lt(10)').addClass('nextTen');

$('a.load_more').on('click', function(e) {
  e.preventDefault();
  var $rows = $('table tr');
  var lastActiveIndex = $rows.filter('.nextTen:last').index();
  $rows.filter(':lt(' + (lastActiveIndex + 11) + ')').fadeIn('slow').addClass('nextTen');
});

＆＃13;

table tr {
  display: none;
}
table tr.nextTen {
  display: table-row;
}
a.load_more {
  text-decoration: none;
}
a.load_more button {
  background-color: #f8ae4c!important;
  border: none;
  box-sizing: border-box;
  display: block;
  margin: 0 auto 20px auto;
  outline: transparent;
  font-size: 20px;
  padding: 10px 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tr class="hide_row">
    <th>1</th>
    <td>Writhlington School</td>
    <td>102 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>2</th>
    <td>Gloucester Academy</td>
    <td>5 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>3</th>
    <td>Pate&#8217;s Grammar School</td>
    <td>5 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>4</th>
    <td>Wellington School</td>
    <td>5 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>5</th>
    <td>Hayesfield Girls School</td>
    <td>4 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>6</th>
    <td>Wellsway School</td>
    <td>4 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>7</th>
    <td>Cotham School</td>
    <td>4 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>8</th>
    <td>High School for Girls</td>
    <td>4 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>9</th>
    <td>Broadoak Mathematics and Computing College</td>
    <td>3 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>10</th>
    <td>The Castle School</td>
    <td>3 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>11</th>
    <td>Kingswood School</td>
    <td>2 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>12</th>
    <td>Ralph Allen School</td>
    <td>2 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>13</th>
    <td>St Mark&#8217;s CofE School</td>
    <td>2 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>14</th>
    <td>Ashton Park School</td>
    <td>2 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>15</th>
    <td>Colston&#8217;s Girls&#8217; School</td>
    <td>2 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>16</th>
    <td>Fairfield High School</td>
    <td>2 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>17</th>
    <td>Oasis Academy Brislington</td>
    <td>2 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>18</th>
    <td>St Brendan&#8217;s Sixth Form College</td>
    <td>2 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>19</th>
    <td>Beaufort Co-operative Academy</td>
    <td>2 Signups</td>
  </tr>
  <tr class="hide_row">
    <th>20</th>
    <td>Dene Magna School</td>
    <td>2 Signups</td>
  </tr>
</table>

<a class="load_more" href="#">
  <button>Show more</button>
</a>

＆＃13;

＆＃13;

＆＃13;