<!doctype html> <html> <head> <title>Color animation jQuery plugin</title> <link title="Main" rel="stylesheet" type="text/css" href="../home.css"> <link href="demo.css" rel="stylesheet"> </head> <body> <h1>Color animation jQuery-plugin</h1> <div id="body"> <p class="crumbtrail"><a href="/">Bitstorm.org</a> > <a href="../">jQuery plugins</a> > Color animation</p> <h2>Animating colors</h2> <p>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:</p> <ul> <li>color</li> <li>backgroundColor</li> <li>borderColor</li> <li>borderBottomColor</li> <li>borderLeftColor</li> <li>borderRightColor</li> <li>borderTopColor</li> <li>outlineColor</li> </ul> <p>This plugin is based on <a href="http://plugins.jquery.com/color/">Color Animations</a> by John Resig. It fixes a major bug and also adds support for the borderColor-property.</p> <p>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.</p> <h2>Demo</h2> <div class="demo"> <div id="demodiv">DEMO</div> <table> <tr> <td><code>$('#demodiv').animate({color: '#E4D8B8'})</code></td> <td> <button onclick="$('#demodiv').animate({color: '#E4D8B8'})">run</button> </td> <td> <button onclick="$('#demodiv').animate({color: '#2A2F4C'})">revert</button> </td> </tr> <tr> <td><code>$('#demodiv').animate({backgroundColor: '#400101'})</code></td> <td> <button onclick="$('#demodiv').animate({backgroundColor: '#400101'})">run</button> </td> <td> <button onclick="$('#demodiv').animate({backgroundColor: '#D9A05E'})">revert</button> </td> </tr> <tr> <td><code>$('#demodiv').animate({borderBottomColor: '#00346B'})</code></td> <td> <button onclick="$('#demodiv').animate({borderBottomColor: '#00346B'})">run</button> </td> <td> <button onclick="$('#demodiv').animate({borderBottomColor: '#DB5533'})">revert</button> </td> </tr> <tr> <td><code>$('#demodiv').animate({borderColor: 'darkolivegreen'})</code></td> <td> <button onclick="$('#demodiv').animate({borderColor: 'darkolivegreen'})">run</button> </td> <td> <button onclick="$('#demodiv').animate({borderColor: '#DB5533'})">revert</button> </td> </tr> <tr> <td><code>$('#demodiv').animate({color: 'rgba(42, 47, 76, 0.1)'})</code></td> <td> <button onclick="$('#demodiv').animate({color: 'rgba(42, 47, 76, 0.1)'})">run</button> </td> <td> <button onclick="$('#demodiv').animate({color: 'rgba(42, 47, 76, 1)'})">revert</button> </td> </tr> </table> </div> <p>The demo is quite simple. Of course you can use all niceties of the animate-function like queues, duration, easing and callback.</p> <h2>Download</h2> <p>For jQuery 1.8 and later:</p> <ul> <li><a href="jquery.animate-colors.js">jquery.animate-colors.js</a> (5kB)</li> <li><a href="jquery.animate-colors-min.js">jquery.animate-colors-min.js</a> (2.7kB, minified)</li> </ul> <p>Just upload this file to your server in include it in your HTML below jQuery.</p> <h2>Archived</h2> <p>For jQuery 1.7.2 and earlier:</p> <ul> <li><a href="archive/jquery.animate-colors-min.js">jquery.animate-colors-min.js</a> (1.70kB, minified)</li> </ul> <h2>License</h2> <p>This jQuery-plugin is available under the <a href="../license.html">MIT and GPL License</a>.</p> </div> <address><a href="/">Edwin Martin</a> <<a href="mailto:edwin@bitstorm.org">edwin@bitstorm.org</a>></address> <script src="../jquery-1.9.1.min.js"></script> <script src="jquery.animate-colors-min.js"></script> <script>var _gaq=[['_setAccount','UA-93616-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script> </body> </html>