currently I’m working on a grid with group rows (on top). If the user clicks on the first cell of the group row (a – sign) the details rows should slide up with animation. I found this answer, and modified the relevant code like this:

$(`[kendogridlogicalrow][calcrowname=${calcRowName}]`)
        .animate({ paddingTop: 0, paddingBottom: 0 }, 500)
        .wrapInner('<div />')
        .children()
        .slideUp(500, function () {
          $(this).closest('tr').hide();
        });

With this all the td elements get wrapped in a div inside a row. I get the ‘almost’ desired result (there is a slide effect), but the detail rows don’t shrink like in the linked example. See this demo.

How can I achieve, that with the slide effect starting from the last detail row the rows are shrinked and then disapper? Should I maybe use each and delay?