color animation

As a developer quickly learns, jQuery offers a nice toolkit to fiddle with CSS on the fly. In particular, you can use animate() to trivially make rough transitions smooth: 
$(".something").animate({"property-name":numericvalue);


The default easing (how it changes from the first state to the next) is called "swing", and gives a nice effect that implies the object has a bit of momentum. (It's a subtle touch of designer-influenced genius that they made the default "swing" rather than the nerdy, more-engineer-friendly linear...) More on easings later...

One seeming gap is that out of the box you can't use the animate() function on colors...  but now, "there's a plugin for that", Bitstorm.org's jQuery Color Animation.

Put a reference to it atop your file:
<script src="/path/to/jquery.animate-colors.js" type="text/javascript"></script>
and then you're free to do something like
$(".userProfileHolder .yoopTab.messages").animate({"background-color":"#ffffff"});

A few small caveats:

• with the version I'm using, you need to use r/g/b hex values, not the human readable colors like "white"
• you need to make sure the object your modifying has a base color set (preferably in hex colors too.)
• if you're changing, say, the background-color property, you may be implicitly setting the background color (or rather semi-explicitly leaving out the background color property) with the "background" shortcut property, which might cause problems. In today's case we were using a "background" property to show a transparent PNG, and then letting the parent's bckground color shine through. I broke up the "background" shortcut property into its individual parts and THEN set the background-color explicitly.

That's it though-- it's might handy and makes for some nice looking transitions than just toggling from one color to another