Jquery 定时器淡出内的动画或滑动不起作用

Question

我有一个 table (bootstrap-table)，我需要每 2.5 秒删除第一行。

在删除它之前，我想 fadeOut 然后 slideUp 或将高度设置为 0。

我的问题是褪色进行得很好，但 animate/slideUp 立即发生。

虽然已成功删除行。

Fiddle: 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);
}

编辑： 事实证明，直接为 height 在 tr/td 上设置动画是不可能的，因此解决方法是在其中插入一个临时 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>

Jquery 定时器淡出内的动画或滑动不起作用

Jquery animate or slideup within fadeout in a timer doesn't work

javascript

jquery

jquery-animate