javascript - 计时器中的淡出内的Jquery动画或滑动不起作用

Question

我有一个表（引导表），我需要每 2.5 秒删除第一行。

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

我的问题是褪色很顺利，但动画/幻灯片立即发生。

行已成功删除。

小提琴：JSFiddle

标签： javascriptjqueryjquery-animate

Answer 1

.fadeOut()在元素上设置 a 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，同时padding为td

在下面看到它的工作：

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