jQuery.Color Demos

by Yolanda Robles

HTML

<script src="http://code.jquery.com/color/jquery.color-2.0b1.min.js"></script>
<div id="c1"></div>
<div id="c2"></div>

CSS

div {
    width: 100px;
    height: 30px;
    margin-bottom: 10px;
    }
#c1 {
    background: red;
    }
#c2 {
    background: hsl(205, 66%, 40%);
    cursor: pointer;
    }

JavaScript

// Rainbow animation
(function animate() {
    var block = $('#c1');
    block.animate({backgroundColor: $.Color(block.css('backgroundColor')).hue('+=179')}, 3000, animate);
})();

// Flash highlight
$('#c2').click(function(e) {
    var block = $(e.target);
    var color = $.Color(block.css('backgroundColor'));
    block.animate({backgroundColor: color.lightness('+=0.4')}, 300, function() {
        block.animate({backgroundColor: color}, 300);
    });
});