Animate background color using jQuery

So you want to animate the background color of an element for some nice effects. Here are the best ways to do it.

Using the Bitstorm color animation plugin

The easiest would be using Bitstorm color animation plugin The usage is simple: $('#yourdiv').animate({backgroundColor: '#fff'})

This will animate the background color from current color to white in a smooth animation This plugin supports animating the color of border or text color as well.

Demo | Download Source

Using jQuery UI

If you already have jQuery UI included in your page, there is no need to add any other plugin (like the Bitstorm plugin mentioned above). The code is same.

More info about the animate() jQuery function

You can create awesome background effects using CSS3 and HTML5. Here is a tutorial on background image