Color animation jQuery-plugin

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

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

Download the full version or the minified version here:

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

CDN

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

<script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>

Package

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

git clone https://github.com/edwinm/Color-animation-jQuery-plugin.git

npm install jquery-color-animation

bower install jquery-color-animation
	

License

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

Edwin Martin <edwin@bitstorm.org>