jQuery fade in background colour

Question

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:

Answer 1

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:

Click to fade Column 1

  

  My Caption
  
  

    
Col 1
Col 2
  
  

    
one
Uno
  
  

    
two
Dos
  

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