<div id="square22" style="width:50px;height:50px;background-color:#FF0000;">
<input type="button" value="stop" onclick="colorTween.stop();">
</div>
<script type="text/javascript" src="Tween.js"></script>
<script type="text/javascript" src="ColorTween.js"></script>
<script type="text/javascript">
var object = document.getElementById('square22').style;
var property = 'backgroundColor';
var easing = Tween.regularEaseIn;
var startColor = 'FF0000';
var endColor = '0000FF';
var duration = 5;
var colorTween = new ColorTween(object, property, easing, startColor, endColor, duration);
colorTween.onMotionFinished = colorTween.yoyo;
colorTween.start();
</script>
JAVASCRIPT MOTION TWEEN
http://jstween.blogspot.com/
Tween.js ColorTween.jsファイル配布元。
英語だけどサンプルは豊富だし、なんとかなるんじゃないだろか。
JavaScript/Library/Effects/JSTween - アークウェブシステム開発SandBox
http://www.ark-web.jp/sandbox/wiki/278.html
メソッドなどの解説。
日本語だけど、ある程度の知識を有する者を対象に書かれてます。（社内向けかも）
ちなみに、かなりCPUを喰いますね。私の環境でループ処理するときつい。
補足
基礎もまだ習得できてはいませんが勉強中です。 lightboxのようにリンク貼れば簡単に使えるのかと思っていましたが、colortweenはそうはいかないみたいですね。 色が変わる効果を使ってwebページを明日までに作りたかったのでこちらで質問したのですが、。 urlありがとうございます。 勉強します