Jquery анимация или замедление в таймере не работает - PullRequest
Новая
       32

Jquery анимация или замедление в таймере не работает

1 голос
/ 17 апреля 2020

У меня есть таблица (bootstrap -table) , в которой мне нужно удалять первую строку каждые 2,5 секунды.

Перед удалением я хотел бы fadeOut а затем slideUp или высота анимации до 0.

Моя проблема в том, что замирание проходит хорошо, но анимация / слайд происходит мгновенно.

Хотя строка успешно удалена.

Скрипка: JSFiddle

1 Ответ

1 голос
/ 17 апреля 2020

.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, одновременно оживляя 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>
...