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:
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:
and then you're free to do something like
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