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

Question

I have a table (bootstrap-table) that i need to delete the first row every 2,5 seconds.

Before deleting it i would like to fadeOut and then slideUp or animate height to 0.

My problem is that the fading goes well but animate/slideUp happens instantly.

Row is successfully removed though.

Fiddle: JSFiddle

Answer 1

.fadeOut() sets a display: none on the element and you will see the sudden jump when it ends. After that setting any property will not show any visual changes.

You can do something like animating opacity first, then the 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);
}

---

Edit: As it turns out, animating on tr / td directly for height is not possible, so a workaround is to insert a temporary div inside it and animate its height , at the same time animating padding of the td

See it working below:

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