Color animation jQuery-plugin > jQuery plugins > Color animation

Animating colors

With jQuery's animate function, you can animate all kinds of css-properties. What's really missing from jQuery is animating colors. This plugin will add this feature. With this plugin, you can animate the following properties:

This plugin is based on Color Animations by John Resig. It fixes a major bug and also adds support for the borderColor-property.

This plugin also adds rgba-colors, so now you can animate the transparency of the background and foreground text independently. Beware that Internet Explorer 8 and earlier don't support rgba-colors.


$('#demodiv').animate({color: '#E4D8B8'})
$('#demodiv').animate({backgroundColor: '#400101'})
$('#demodiv').animate({borderBottomColor: '#00346B'})
$('#demodiv').animate({borderColor: 'darkolivegreen'})
$('#demodiv').animate({color: 'rgba(42, 47, 76, 0.1)'})

The demo is quite simple. Of course you can use all niceties of the animate-function like queues, duration, easing and callback.


For jQuery 1.8 and later:

Just upload this file to your server in include it in your HTML below jQuery.


For jQuery 1.7.2 and earlier:


This jQuery-plugin is available under the MIT and GPL License.

Edwin Martin <>