Bitstorm.org > JavaScript > jQuery plugins > Color animation
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="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
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
This jQuery-plugin is copyright 2015 Edwin Martin and released under the open source MIT license. The code is available on GitHub, where you can clone and improve it and make pull requests.