views:

37

answers:

1

Hi,

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 : link text

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.

Thanks for your answers

A: 

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
});
balpha
Really nice answer, I will test this tomorrow (end of working day for me ;), and post the solution I've chosen. Thanks a lot (btw I'm really interested in learning how animations work in jQuery, where did you find such information ?).
Michael Lumbroso
@Michael Lumbroso: I guess everyone doing animation with jQuery has been bitten by a similar problem at some point; you then learn that kind of stuff along the way. The [jQuery documentation](http://api.jquery.com/) is actually pretty good.
balpha
I have implemented your solution, it worked so perfectly, thanks for your clear, exhaustive and supra fast answer, I will register to be able to vote for you ;)Btw, I checked the jQuery doc before submitting my answer (always do before creating a topic ^^), but I hadn't found any of what could have helped me with this. I checked again, and I still don't know how i could have gotten any more useful information without your valuable pro explainations. (sry for my bad English, Grammatical conjugation is not my specialty :p )
Michael Lumbroso
@Michael Lumbroso: Thanks, glad it worked. The relevant part in the [documenation of slideUp](http://api.jquery.com/slideUp/) is *If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.*
balpha