jQuery color animations

By Rebecca | December 4, 2007

categories: javascript, jquery

I'm working on a web-based ROI calculator where the user enters some data, the data gets passed to the server via an XHR, numbers get crunched, and a JSON string with updated values gets returned. There are a lot of fields on the screen at a given time, so I wanted the user to get a visual cue when a field is updated. I thought I'd use jQuery's animate() method to do this, but it kept not working no matter what I tried.

It turns out that the animate() method only works well with numeric values. For example, 

$('foo').animate({opacity:0.5},200)

works well, but 

$('foo').animate({color:'red'},200)

not so much.

Turns out that the color animations plugin fixes this problem (for jQuery 1.2 and above). Now, when I get a new value for a field, I change the value, light up the field's container element, and then slowly fade it back to its original color:

 
$field.
  empty().
  html(fieldValue).
  parent().
    animate({backgroundColor: '#cef'},50).
    animate({backgroundColor: '#cfc'},2000);
 

Tags: | No Comments »

Comment