javascript forループの各ラウンドでhtml結果を表示

Question

これは既に回答が必要ですが、見つけられません。
[EDIT：ここに非常によく似たソリューション： Fade in each li one by one、しかしまた、非常にきれいにループ無限の世話をする、それ以下WaldemarIceのソリューションを見ているん]

私はテーブルの連続した行がフェードインとフェードアウトを示すことにしたいです一度に1つずつ、他のすべての行は表示されません。私は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

無限ループに、テーブルの各行を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); 
    }); 
});