Web development by Gabriele Romanato

Post navigation

jQuery: fading background colors

One of the most interesting parts of jQuery is its ability of adding nice visual effects with a minimum effort. I was developing an Ajax validation system for a contact form and I was
strucked by the fact that my error messages were pretty plain. When a user made a mistake, an error message appeared and when he actually inserted the correct values, then the message disappeared.
I did want to add some color effect to this transition, so I wrote this simple plugin inspired by the code of Douglas Crockford:

The transition is pretty simple: the box first turns yellow and then fades to white in a time span defined by the speed parameter. There are a few gotchas to keep in mind with this
code. First, to properly get a reference to the jQuery element, I've created a variable called node and I've stored that reference in this variable. Second, the setTimeout()
function has been called using its complete hierarchy path, starting from the global window object. This avoids us any possible scope problem. You can see the final result
here.

This entry was posted in jquery by Gabriele Romanato. Bookmark the permalink.