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

Question

这已经回答了，但我找不到。
[编辑：非常相似的解决方案在这里： 逐个淡入淡出，但是请看一下下面的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>

Answer 2

你可以这样使用：

$(document).ready(function(){
    $("table#hidden tr").each(function(i,v){
        setTimeout(function(){
      var thisrow = $(v);
      $(thisrow).fadeIn(2000);
      $(thisrow).fadeOut(2000);
    }, 4000 * i); 
  });
});