jQuery append row to table and slideDown effect is corrupting the table row
<p>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).</p>

<p>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.</p>

<p>I have a table like this:</p>

<pre><code>&lt;div id="results"&gt;
  &lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;&lt;td&gt;Col1&lt;/td&gt;&lt;td&gt;Col2&lt;/td&gt;&lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>and my Javascript looks like this:</p>

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

<p>I've also tried this:</p>

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

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

<p>Is this possible?</p>

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