Peter Peller is spot-on, if you're not already employing jquery UI, then at least go with the jQuery color plugin.
Below is a code snippet that I whipped-up which had success across a variety of browsers:
<a href="#" ID="fadeTable" title="click to fade col1">Click to fade Column 1</a>
<table width="400px" border="1" cellspacing="0" cellpadding="1"
summary="This is my test table">
<caption align="top">
My Caption
</caption>
<tr>
<th scope="col" class="row0 col1" >Col 1</th><th scope="col">Col 2</th>
</tr>
<tr>
<td class="row1 col1" >one</td><td>Uno</td>
</tr>
<tr>
<td class="row2 col1" >two</td><td>Dos</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
// requires http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js
var iAniSpeed = 2000;
var sBgColor = 'gold';
$('#fadeTable').click(function(){
$('td.col1').animate( { backgroundColor: sBgColor }, iAniSpeed);
return false;
});
});
</script>
As an alternate, you may want to color the background to its original color first, then animate to the new color.
To make that happen, just replace the current animate block with something like this:
$('td.col1').animate( { backgroundColor: 'white' }, 250, function()
{
$(this).animate( { backgroundColor: 'gold' }, 2000);
}
);