hacking and gonzo since 2000

Yellow Fade Technique

The Yellow Fade Technique is used to highlight changes without getting in user's way.

Some people use 100 lines of JavaScript to implement this. The best solution I found was this.

Here is my 13 lines long implementation:

AJS.fx = {
    _shades: {1:'ff', 2:'ee', 3:'dd', 4:'cc', 5:'bb', 6:'aa', 7:'99'},
    fadeIn: function(elm, i) {
        elm = AJS.$(elm);
        if(!i && i != 0) i = 7;
        if(i == 0) {
            elm.style.backgroundColor = "transparent";
            return;
        }
        elm.style.backgroundColor = '#ffff' + AJS.fx._shades[i];
        AJS.callLater(AJS.$b(AJS.fx.fadeIn, this, [elm, i-1], true), 200);
    }
}

The most simple implementation out there?

Code · JavaScript • 14. Nov 2006