$.Fade background color to currently set color

Question

I'm trying to create a pulsate effect on a table entry that's being inserted into a table with $.ajax.

The table rows have odd / even classes that make the table look like a zebra (odd rows have lighter background).

When a new table row is added, it will be appended to the table, so I'm just checking if the last row (table tr:last) has an "odd" class. If it does then I'm adding the "even" class to the newly appended row, otherwise I'm adding the "odd" class to it.

Anyway how can I make the new row fade from red to whatever background color odd/even classes are applying to it.

I tried with:

new_row.addClass(odd_or_even_class); // here the class is decided
var currentColor = new_row.css('background-color'); 
new_row.css('background-color', '#FF99CC')
       .animate({backgroundColor: currentColor}, 1000);

But for some weird reason it fades to white...

I think it has something to do with the value of the "currentColor" variable which looks like rgba(...) instead of a hex value. And maybe $.animate only accepts hex values?

probably your "currentColor" var is missing something. Maybe escaping the sharp? or adding it back later? what does currentColor print before the .animate? — Th0rndike, May 14 '12 at 12:59
Yup I also think it's because of `currentColor` returning an RGB value instead of hex, maybe this could help you out: http://stackoverflow.com/questions/1740700/get-hex-value-rather-than-rgb-value-using-jquery — billyonecan, May 14 '12 at 13:07
Guys, don't forget that information is not the same as any particular representation of it. "rgb(0,0,255)" and "#0000FF" mean the same thing to a computer. It's just different notations for human readability. — juanpaco, May 14 '12 at 13:15

score 2 · Answer 1 · answered May 14 '12 at 13:00

2

By default, RGBA is not supported in animations.

Here is an alternative solution: http://pioupioum.fr/sandbox/jquery-color/

answered May 14 '12 at 13:00

Johan

35,120
54
178
293

score 1 · Accepted Answer · answered May 14 '12 at 13:11

From the jQuery animate documentation:

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable. http://api.jquery.com/animate/

So Johan's answer is right, and you need to use something else like the jQuery Color plugin. I would have just added this as a comment on his answer, but I don't think I have the rep for it yet.

$.Fade background color to currently set color

2 Answers2