graphis/js_animate_color.html

## js_animate_color.html
<html>
<head>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
	var cb = $('<div class="color"/>').appendTo('body');
	var c1 = [255, 0, 0];
	var c2 = [0, 255, 255];

	var s = 0, c = 100, i;
	i = setInterval(function()
	{
		var r = Math.round(((c2[0] - c1[0]) / c * s) + c1[0]);
		var g = Math.round(((c2[1] - c1[1]) / c * s) + c1[1]);
		var b = Math.round(((c2[2] - c1[2]) / c * s) + c1[2]);

		cb.css('background-color', 'rgb('+ r +', '+ g +', '+ b +')');

		s++;

		if (s >= c) { clearInterval(i); }
	}, 10);
});
</script>
<style type="text/css" media="screen">
body { background: #000; color: #fff; text-align: center; }
div.color { height: 10em; width: 10em; margin: 1em auto; background: #fff; }
</style>
</head>
<body>
	<h1>Animated Colors</h1>
</body>
</html>
	<html>
	<head>
	<script type="text/javascript" charset="utf-8" src="jquery.js"></script>

	<script type="text/javascript" charset="utf-8">
	$(document).ready(function()
	{
	var cb = $('<div class="color"/>').appendTo('body');
	var c1 = [255, 0, 0];
	var c2 = [0, 255, 255];

	var s = 0, c = 100, i;
	i = setInterval(function()
	{
	var r = Math.round(((c2[0] - c1[0]) / c * s) + c1[0]);
	var g = Math.round(((c2[1] - c1[1]) / c * s) + c1[1]);
	var b = Math.round(((c2[2] - c1[2]) / c * s) + c1[2]);

	cb.css('background-color', 'rgb('+ r +', '+ g +', '+ b +')');

	s++;

	if (s >= c) { clearInterval(i); }
	}, 10);
	});
	</script>
	<style type="text/css" media="screen">
	body { background: #000; color: #fff; text-align: center; }
	div.color { height: 10em; width: 10em; margin: 1em auto; background: #fff; }
	</style>
	</head>
	<body>
	<h1>Animated Colors</h1>
	</body>
	</html>