Fade in a table row when it's added to a table

Question

I have the following code to add a new row to the end of a table:

$('.row-data:last').after('some HTML rows');

I want to use something like .fadeIn("slow") so each row fades in before it appears but I don't seem to be getting any animation:

$('.row-data:last').after('some HTML rows').fadeIn("slow");

Any ideas what I'm missing?

Thank you :).

Answer 1

Try this:

var rows = $('some HTML rows');
rows.hide();
$('.row-data:last-child').after(rows);
rows.fadeIn("slow");

Example: http://jsfiddle.net/qdPAe/1/