make table rows not moving when fading

Tấn Trung Trương 0
Viewed 31

I have a table with 4 rows and it will fade 2 couple rows continiously. My question is how to make it stable when fading? My html that show table:

 <table id="myTbl">
   <thead>
     <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
 </thead>
   <tbody>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
  </tr>
  <tr hidden>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
 </tr>
 <tr hidden>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
</tr>
 </tbody>

My js to active the animate function:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$.fn.slide = function() {
   var self = this,
   kidsHidden = self.children().filter(':hidden'),
   kidsNotHidden = self.children().filter(':not(:hidden)');
   kidsHidden.fadeIn();
   kidsNotHidden.fadeOut();
};
$(function() {  
  setTimeout(function() {
  $('#myTbl tbody').slide()
  }, 2000);
})

Like the rows won't move when it fades back to back.. Please help!

javascript html
2 Answers

You could use classes and change the opacity property instead of using fadeIn() and fadeOut(). Define a class hidden whose elements will have opacity: 0 and every other element will have opacity: 1. Then you can use the toggleClass() function to change the opacity:

$.fn.slide = function() {
   var self = this,
   kidsHidden = self.children().filter('.hidden'),
   kidsNotHidden = self.children().filter(':not(.hidden)');
   kidsHidden.toggleClass('hidden');
   kidsNotHidden.toggleClass('hidden');
};
$(function() {  
  setInterval(function() {
  $('#myTbl tbody').slide()
  }, 2000);
})
.hidden {
  display: none;
}
:not(.hidden) {
  display: block;
}
 <table id="myTbl">
   <thead>
     <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
 </thead>
   <tbody>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
  </tr>
  <tr class="hidden">
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
 </tr>
 <tr class="hidden">
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
</tr>
 </tbody>

You can also use setInterval() instead of setTimeout() to repeat the transition.

Vasilis G.0

It is not much clear what you mean by: "how to make it stable when fading?" However, if you want to smoothly change kidsHidden elements to the kidsNotHidden by fading out and in. You could make something like:

$.fn.slide = function() {
   var self = this,
   kidsHidden = self.children().filter(':hidden'),
   kidsNotHidden = self.children().filter(':not(:hidden)');
   

   kidsNotHidden.fadeOut();
   // Put it after fadeOut and put the delay you like
    setTimeout(()=> {
      kidsHidden.fadeIn();
    }, 500)
};
$(function() {  
  setTimeout(function() {
  $('#myTbl tbody').slide()
  }, 2000);
})

here is a working example: https://jsfiddle.net/4r3vpja7/20/

Farukh Fuzaylov0
Related