fadeIn not working in IE

JavaScript
1

Hi all,

I am working on what I thought would be a simple and quick project where I have built a table and I need to be able to allow the user to add another row or more by clicking a button.

First off I got the adding a row and removing a row pretty easily. THen i wanted the new row to fade in which after some jigging with the code and finding that Ie does not like the fade in i came up with the following:


 $(".addnew").click(function() {
	lastRow = $('#hazardtable tr:last').clone();
   $("#hazardtable").append(lastRow);
   $('#hazardtable tr:last').hide();
   $('#hazardtable tr:last td').fadeIn('slow');
   $('#hazardtable tr:last').show();
   $('#hazardtable tr:last td').show();
  });

In short the above code clones that current last row in the table and appends it to the end of the table and fades it in.
This works perfectly in Safari and Firefox and 99% in Ie, however in some of the cells of the table I have set a background colour.
For some very odd reason when these cells are faded in they lose the border on the table. If i use show() it shows the borders no problem but i would very much like to use the fadeIn() as it looks much nicer.

here is one of the cells that I am having trouble with:

<td align="center" valign="middle" bgcolor="#006600"><input name="riskoutcome5" type="radio" class="radio" id="riskoutcome_7" value="hi" /></td>

On the table itself i have border=“1”

Can anyone help?

2

It’s because you are hiding it before you fade in…


 $('#hazardtable tr:last').hide();
 $('#hazardtable tr:last td').fadeIn('slow');

Can’t show the fade In if it is hidden.

3

Thanks for the reply.
Unfortunately without that it does not fade in at all.
When it clones the last row it is already visible so I have to hide it to then fade it in.
Then just for IE i have to also use show() to make it visible even though it has been faded in.