Applying .animate() to a row added using .after()

Question

So I currently use the following:

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

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

<tr><td>stuff</td></tr>

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

$("#tableRow").after(html).animate({ backgroundColor: "#bce4b4" }, "fast")

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?

UPDATE:

Based on the answers given I put this together: http://jsfiddle.net/jreljac/5ctpc/3/ where I do the following:

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

(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?

Answer 1

This will do what you want:

$(html).insertAfter('#tableRow').animate({ backgroundColor: "#bce4b4" }, "fast")

Although 'html' is just a string, you can still wrap it in $() to turn it into a jQuery object.

Answer 2

User insertAfter instead. It will then animate the correct row.

$(html).insertAfter("#tableRow").animate(...

Answer 3

Try using insertAfter() instead

$(html).insertAfter('#tableRow').animate({ backgroundColor: "#bce4b4" }, "fast");