javascript - 在每轮 javascript for 循环中显示 html 结果

Question

这个问题已经有答案了，但我找不到。
[编辑:这里的解决方案非常相似: Fade in each li one by one ，但是请看看下面 WaldemarIce 的解决方案，它也很好地处理了无限循环]

我希望表格的连续行以淡入和淡出的方式显示，一次一个，而所有其他行都隐藏。我正在使用 jQuery，请参阅下面的代码。

我想要发生的是每一行依次淡入和淡出。

发生的情况是所有行同时淡入和淡出。如何分离事件？

$(document).ready(function(){
  for(i=0;i<3;i++){
    var eqvar = "tr:eq(" + i + ")";
    var thisrow = $("table#hidden").find(eqvar);
    $(thisrow).fadeIn(2000);
    $(thisrow).fadeOut(2000);
  }
});

.hide{
display:none;
}

<table id="hidden"><tbody>
<tr class="hide"><td>Row 1</td></tr>
<tr class="hide"><td>Row 2</td></tr>
<tr class="hide"><td>Row 3</td></tr>
</tbody></table>

Answer 1

在无限循环中显示表的每一行(一次一行)的代码示例:

$(document).ready(function(){
  function present () {
    $('#hidden tr')
      .each(function (idx) {
        $(this).delay(idx * 1300).fadeIn(250).delay(800).fadeOut(250)
      })
      .promise().then(present)
  }

  present()
})

.hide {
  display: none;
}

<table id="hidden">
  <tbody>
    <tr class="hide"><td>Row 1</td></tr>
    <tr class="hide"><td>Row 2</td></tr>
    <tr class="hide"><td>Row 3</td></tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>