How can I fade-out a row (TR) in IE6 or 7

Question

I'm using JQuery to fade-out rows (TR) when the user clicks a Delete button on a row (TR). By fade-out, I mean the entire row (TR) background-color is changed to an off red and then it fades to white and disappears. This is a great little animation for showing the user an instant reaction for what the did.

The JavaScript looks like this:

$(tr).css("background-color", "rgb(255,200,200)");
$(tr).fadeOut(500, RemoveDomElement);

This works beautifully in Firefox, Safari, Opera and Chrome, but - of course - not in IE. IE will execute the code and finish the cleanup, but the actual fade-out animation isn't shown.

What can I do for IE?

Answer 1

Fade out (and remove) the child cells (TD) instead of the row.

Do this:

$(tr).children().css("background-color", "rgb(255,200,200)");
$(tr).children().fadeOut(500, RemoveDomElement);

Even though each of the TDs is doing it's own thing, this will work quickly enough to the human eye to be the same as just fading/removing the TR.