jQuery append row to table and slideDown effect is corrupting the table row

Question

I'm trying to use jQuery to append a row to a table and to apply the slideDown effect on just that row as it loads in (for context, the results are being retrieved via Ajax and are added when received).

When I add the row without effect the table forms correctly. When I use fadeIn as an effect, the table still forms correctly. However, when I use slideDown as the effect, the table row becomes "corrupted" and the columns fail to line-up correctly.

I have a table like this:

<div id="results">
  <table>
    <thead>
      <tr><td>Col1</td><td>Col2</td></tr>
    </thead>
  </table>
</div>

and my Javascript looks like this:

$("<tr><td>val1</td><td>val2</td></tr>")
 .hide().slideDown("slow")
 .appendTo("#results table tbody");

I've also tried this:

$("#results table tbody")
  .append("<tr><td>val1</td><td>val2</td></tr>")
  .find("tr:last").hide().slideDown("slow");

The second option here shows the effect correctly, but as I mentioned garbles the table.

Is this possible?

I'm testing this in Chrome 4 (could that be the issue?)

Answer 1

Looks like a duplicate of How to Use slideDown (or show) function on a table row?

The short answer is that jQuery animations don't work well on things that aren't block elements, and especially don't work on table rows and cells.