jQuery - applying .animate() to a row added using .after()
<p>So I currently use the following:</p>

<pre><code>$.ajax({
    type: "GET",
    url: "file.php",
    success: function(html) {
        $("#tableRow").after(html);
    }
});
</code></pre>

<p>which neatly adds a new row (or rows) to an existing table.
file.php returns:</p>

<pre><code>&lt;tr&gt;&lt;td&gt;stuff&lt;/td&gt;&lt;/tr&gt;
</code></pre>

<p>I can add a single row at a time.
I'm trying to animate just the newly added row like:</p>

<pre><code>$("#tableRow").after(html).animate({ backgroundColor: "#bce4b4" }, "fast")
</code></pre>

<p>but that highlights the row I'm adding the new row after.  I can't get it to apply to just that new row.  How can I do that?</p>

<p><strong>UPDATE</strong>:</p>

<p>Based on the answers given I put this together:
<a href="http://jsfiddle.net/jreljac/5ctpc/3/" rel="nofollow">http://jsfiddle.net/jreljac/5ctpc/3/</a> where I do the following:</p>

<pre><code>$("&lt;tr&gt;&lt;td&gt;2 1&lt;/td&gt;&lt;td&gt;2 2&lt;/td&gt;&lt;/tr&gt;").insertAfter("#tableRow").animate({
    backgroundColor: "#bce4b4"
}, "slow");
</code></pre>

<p>(I replaced what file.php will give with text") and that does not seem to work.  It creates the row but does not animate.  Am I missing something simple?</p>
