最近、よく見かけるので prototype.js 使って実装してみる。
fat.js ってもっと便利なやつもあるけど、単純にやってる事がよく分かるように実装してみたつもり。

エフェクトをかけたい要素の id を指定して、 
<script type="text/javascript">
new Fade('id');
</script>
みたいな感じで使う。 
var Fade = Class.create();
Fade.Colors = ['#ffff99', '#ffffaa', '#ffffbb', '#ffffcc', '#ffffdd', '#ffffee', '#ffffff',];

Fade.prototype = {
    initialize: function(element) {
        this.element = $(element);
        this.idx = 0;
        setTimeout(this.doFade.bind(this), 300);
    },
    doFade: function() {
        if(this.idx == Fade.Colors.length) 
            this.element.style.backgroundColor = 'transparent';
        if(this.idx < Fade.Colors.length) {
            this.element.style.backgroundColor = Fade.Colors[this.idx];
            this.idx++;
            setTimeout(this.doFade.bind(this), 300);
        }
    }
};
動いてるデモはこのへん。