CODEWITHSUNDEEP
javascriptjqueryfor-loopfadein
danbae
danbae

Reputation: 673

Display html result at each round of javascript for loop

This has got to be answered already, but I can't find it.
[EDIT: very similar solution here: Fade in each li one by one, however do have a look at WaldemarIce's solution below which also takes care of infinite looping very nicely]

I want consecutive rows of a table to be shown with fade in and fade out, one at a time, while all the other rows are hidden. I am using jQuery, see code below.

What I want to happen is for each row to fade in and out, one after the other.

What happens is that all the rows fade in and out together, simultaneously. How do I separate the events?

$(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>

Upvotes: 0

Views: 298

Answers (2)

user6748331
user6748331

Reputation:

Example of code showing each row of the table, one at time, in infinite loop:

$(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>

Upvotes: 1

VMT
VMT

Reputation: 201

you can use like this:

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

Upvotes: 1

Related Questions