分阶段显示表格内容：现有jQuery fadeIn()代码失效求助

云原生阿岚

2026-8-18

表格分批次显示并切换内容的实现方案

问题分析

原代码未生效的核心原因：

初始所有表格行都是可见状态，kids.filter(':hidden')找不到目标元素，fadeIn()自然无法触发
使用setInterval会循环执行逻辑，不符合「单次切换：先显示前半→删除→显示后半」的需求
setInterval回调里的$(this)指向window对象，而非表格行，导致appendTo逻辑完全错误

正确实现代码

HTML（保持原有结构不变）

<table id="myTbl"> 
  <thead>
    <tr> 
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

jQuery 代码

$(function(){
  // 页面加载完成后，先隐藏后半部分行（对应9-16的数据）
  const $tbody = $('#myTbl tbody');
  const $firstHalf = $tbody.children('tr:lt(2)'); // 前两行（1-8）
  const $secondHalf = $tbody.children('tr:gt(1)'); // 后两行（9-16）
  $secondHalf.hide();

  // 延迟1秒后执行切换逻辑
  setTimeout(function(){
    // 前半部分淡出完成后，删除该行并淡入后半部分
    $firstHalf.fadeOut(500, function(){
      $(this).remove();
      $secondHalf.fadeIn(500);
    });
  }, 1000);
});