Color animation jQuery-plugin > JavaScript > 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.


Download the full version or the minified version here:

Just upload this file to your server and include it in your HTML below jQuery. Don't link to these files on this domain directly.


The easiest way is to use a content delivery network. Just paste the following code in your HTML just below jQuery.

<script src="//"></script>


To install the whole package, you can use one of the following commands:

git clone

npm install jquery-color-animation

bower install jquery-color-animation


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

Edwin Martin <>