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>

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); 
  });
});

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

2 个答案: