Color animation jQuery-plugin

Bitstorm.org > 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.

Demo

DEMO
$('#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

For jQuery 1.8 and later:

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

Archived

For jQuery 1.7.2 and earlier:

License

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

Edwin Martin <edwin@bitstorm.org>