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>