Saya memiliki tabel (bootstrap-table) yang saya perlukan untuk menghapus baris pertama setiap 2,5 detik.

Sebelum menghapusnya saya ingin fadeOut dan kemudian slideUp atau menganimasikan tinggi ke 0.

Masalah saya adalah fading berjalan dengan baik tetapi animate/slideUp terjadi secara instan.

Baris berhasil dihapus sekalipun.

Biola: JSFiddle

1
e4rthdog 17 April 2020, 19:34

1 menjawab

Jawaban Terbaik

.fadeOut() menetapkan display: none pada elemen dan Anda akan melihat lompatan tiba-tiba saat elemen tersebut berakhir. Setelah itu, pengaturan properti apa pun tidak akan menampilkan perubahan visual apa pun.

Anda dapat melakukan sesuatu seperti menganimasikan opacity terlebih dahulu, lalu height:

function fadeoutFirst() {
    timerFadeout = setInterval(function () {
        $('#table tbody tr:first').animate({opacity: 0}, 1000, function () {
            $(this).animate({height: 0}, 1000, function () {
                $(this).remove();
                if ($('#table tbody tr').length <= 10) {
                    stopfadeoutFirst();
                }
            });
        });
    }, 2500);
}

Edit: Ternyata, menganimasikan tr/td langsung untuk height tidak memungkinkan, jadi solusinya adalah menyisipkan div sementara di dalamnya dan menganimasikan height-nya, sekaligus menganimasikan padding dari td

Lihat itu bekerja di bawah ini:

$(function() {

  $('#btn').click(function() {
    timerFadeout = setInterval(function() {
      let row = $('#table tbody tr:first')
      row.animate({ opacity: 0 }, 1000
      , function() {
        
        let col = row.find('td')
        
        col
        .wrapInner('<div/>')
        .find("div")
        .animate({ height: 0 }, 1000)

        col.animate({ padding: 0 }, 1000
        , function() { row.remove() })
        
      })
    }, 2500)
  });
       
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

<div>
  <button id="btn">Click Me!</button>
</div>
<table id="table" class="table">
  <thead>
    <th>COLUMN</th>
  </thead>
  <tbody>
    <tr>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
    </tr>
    <tr>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
    </tr>
    <tr>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
    </tr>
    <tr>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
    </tr>
    <tr>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
    </tr>
    <tr>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
    </tr>
  </tbody>
</table>
1
Anurag Srivastava 18 April 2020, 08:52