jQuery "size" effect not working on <tr> element

I have a table in which the even rows have a colspan spanning the width of the table and will contain details about the preceeding row. I'm trying to write a script that will resize the height of the row when the user clicks it to display it's contents. I am using a mixture of javascript and jQuery to do this and it works perfectly in IE9, however it doesn't work in anyother browser.

here is my test case...

http://www.duncangravill.com/Home/RevealResultsTest

it breaks the same way in all other browsers.

Is thi开发者_StackOverflow社区s a common problem with the jQuery Size effect? Does anybody know if there is a fix for this?

Thanks,

Try changing:

 $(idToSelect).effect("size", { to: {height: 300} }, 500);

To:

$(idToSelect).animate({height:'300px'},500);