jQuery SlideUp on a row with hidden columns

Question

I've got a table and when I remove a row it animates with slideUp.

$(id).find("td div").slideUp

I used this trick to use slideUp on a row : animating-table-rows-with-jquery

There is no problem when all columns are displayed, but when I have hidden columns, it just removes the row with no animation. I guess it is a normal behaviour from slideUp, but is there a trick to make it work with animate? I was thinking of testing if the td is hidden, do nothing, else slideUp, but I don't think this will do the trick.

Answer 1

The reason for this is that the callback given to slideUp is not called after all animations are complete, but after each animation is complete. Since the divs in the hidden column aren't visible, the sliding up animation doesn't need to happen, i.e. is completed immediately, and thus the callback is called immediately.

The callback, however, removes the whole row.

There are several ways to deal with this. The idea that you had yourself (not dealing with divs that aren't visible anyway) is one way that should work.

Another way is to set a time out to remove the row, instead of doing it in the callback.

A third way is to check in the callback if there are any divs left, and only remove the row if there are not, i.e. something like

$(id).find("td div").slideUp(function() {
    $(this).remove();                     // remove the div itself
    if ($(id).find("td div").length == 0) // if none are left
        $(id).remove();                   // then remove the row
});