jQuery fade in background colour

Question

Hi, I'm trying to fade in the background colour of a table row, and can't get it right. The fade-in will happen when a button is clicked.

I tried something like:

$("#row_2").fadeIn('slow').css('background', 'gold')

And although this will apply the colour to the table row, it won't fade in, but apply it at once.

I'm sure this is a simple thing, but I can't find an answer to that. I've looked all over in this website, but still no luck for this specific thing.

Thanks in advance

Answer 1

Unfortunately it is not possible to fade in the background color (I don't know about the latest release of jquery). However you can use this plugin for that purpose:

highlightFade

Now it's up to you whether you use that plugin or not for just background fading effect :)

Answer 2

The pure jQuery does not have functionality to animate colors. You have to use jQueryUI or jQuery color plugin.

Then use .animate() function.

Answer 3

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);
      }
  );