Jquery 在計時器的淡出中動畫或上滑不起作用

Question

我有一個表（引導表） ，我需要每 2.5 秒刪除第一行。

在刪除它之前，我想fadeOut然后slideUp或將高度設置為 0。

我的問題是褪色很順利，但動畫/幻燈片立即發生。

行已成功刪除。

小提琴： JSFiddle

Answer 1

.fadeOut()在元素上設置一個display: none ，當它結束時你會看到突然的跳躍。 在該設置之后，任何屬性都不會顯示任何視覺變化。

你可以先做opacity動畫，然后是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);
}

---

編輯：事實證明，在tr / td上直接為height設置動畫是不可能的，因此一種解決方法是在其中插入一個臨時div並為其height設置動畫，同時為td的padding設置動畫

在下面看到它的工作：

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