5

I have table with 100 rows. It comes by dynamically from the database. I need to animate each row one by one. 

<tr>
                            <td>Abraham</td>
                            <td>076 9477 4896</td>
                            <td>294-318 </td>
                            <td><span class="count">200</span></td> 
                        </tr>
                            <tr >
                            <td>Abraham</td>
                            <td>076 9477 4896</td>
                            <td>294-318 </td>
                            <td><span class="count">200</span></td>

                        </tr>
                        <tr >
                            <td>Phelan</td>
                            <td>0500 034548</td>
                            <td>680-1097 Mi Rd.</td>
                            <td><span class="count">200</span></td>

                        </tr>
                        <tr>
                            <td>Raya</td>
                            <td>(01315) 27698</td>
                            <td>Ap #289-</td>
                            <td></td>

                        </tr>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Anish Sharma
  • 177
  • 1
  • 1
  • 12

2 Answers2

11

try this code :

$("table tr").hide();
$("table tr").each(function(index){
 $(this).delay(index*500).show(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Abraham</td>
<td>076 9477 4896</td>
<td>294-318 </td>
<td><span class="count">200</span></td> 
</tr>
<tr >
<td>Abraham</td>
<td>076 9477 4896</td>
<td>294-318 </td>
<td><span class="count">200</span></td>

</tr>
<tr >
<td>Phelan</td>
<td>0500 034548</td>
<td>680-1097 Mi Rd.</td>
<td><span class="count">200</span></td>

</tr>
<tr>
<td>Raya</td>
<td>(01315) 27698</td>
<td>Ap #289-</td>
<td></td>

</tr>
</table>
alireza khosravi
  • 405
  • 2
  • 17
5

I use css but set to each tr- animation-delay in jquery...

Also I use :not(:first-child) to exlude the header of table(first tr)

$("tr:not(:first-child)").each(function (index ) {
   $(this).css('animation-delay',index *0.5 +'s');
});  
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
 tr:not(:first-child){    
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  
  to {
    opacity: 1;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
לבני מלכה
  • 15,925
  • 2
  • 23
  • 47