Krunoslav Husak’s playground

Animating table rows (fading in/out, sliding in/out…) is easy. For example let’s use this table:

<table>
    <tr id="row1">
        <td>column 1</td><td>columnd 2</td>
    </tr>
</table>

And javascript code:

$('#row1').fadeOut();

And it works! Well, not exactly. It works in Firefox, Safari, Chrome but not in IE (what a surprise). In Internet Explorer it does not animate instead it just hide it/show it without any animation. Solution is: you have to animate not entire row but row’s columns:

$('#row1').find('td').fadeOut();

So, if you want to animate rows or columns depending on browser you could do something like this:

if ($.browser.msie)
{
    $('#row1').find('td').fadeOut();
}
else
{
    $('#row1').fadeOut();
}