How to add a new Row in a table with animation using jQuery?

Question

This is what i am doing to add new Row in table:-

function expandAll(){
     $('#myTableID>tbody>tr>td:nth-child(2)>div:nth-child(2)').each ( function() {
      html = $(this).html();
// Is it possible to add this Row with animation
      $(this).parent().parent().after( "<tr><td colspan='2'>&nbsp;</td><td colspan='15'>" + html + "</td></tr>" ).slideDown('slow');   
     } );
    }

I am able to add new Row, but there is no effect of using slideDown .

Answer 1

The trick that i sometimes use is to first hide the rows using hide and then show again with some animation functions such as fadeOut, slideUp, etc

Answer 2

If you have JQuery 1.3.2, you can do this:

$("<your row html>").hide().insertAfter($(this).parent().parent()).slideDown('slow');