CODEWITHSUNDEEP
jquery
Pankaj Vasnani
Pankaj Vasnani

Reputation: 25

Animate every table row once using jquery

I want to animate every table row once using jquery jusgt like the flashing effect to every row once in a single go. I have tried below code but no positive result. 

$(document).ready(function() {
  setInterval(function() {
    var rowsCount = 0;
    var blinking_rows = [];
    $('#tblOne tbody tr').each(function() {
      $(this).animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
      });
    });
  }, 5000);
});

Upvotes: 0

Views: 61

Answers (2)

user2314737
user2314737

Reputation: 29317

This is a sample animation. Every time the function in setInterval is called, one row in the table is animated

$(document).ready(function() {
  var rowsCount = 0;
  var lenTable = 3;
  setInterval(function() {    
    $('#tblOne tbody tr').not(':eq(rowsCount)').animate({
      opacity: '1',
      fontSize: "12px",
    });
    $('#tblOne tbody tr').eq(rowsCount).animate({
      opacity: '0.5',
      fontSize: "48px",
    });
    rowsCount = (rowsCount + 1) % lenTable;
    console.log(rowsCount);
  }, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="tblOne" style="width:100%">
  <tr>
    <td>&#9632;</td>
    <td>&#9632;</td>
    <td>&#9632;</td>
  </tr>
  <tr>
    <td>&#9632;</td>
    <td>&#9632;</td>
    <td>&#9632;</td>
  </tr>
  <tr>
    <td>&#9632;</td>
    <td>&#9632;</td>
    <td>&#9632;</td>
  </tr>
</table>

Upvotes: 1

xetra11
xetra11

Reputation: 8837

$('#tblOne tbody').each(function(){...})

What about that? Before you were "eaching" on tbody tr not on tbody. I dont think tr had any tr children in your code.

I hope I'm right !

Upvotes: 0

Related Questions