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

5 comments so far

Braydon Fuller 6. Apr 2007

Good work. I don't know if it is the most simple out there. It's awesome that you strive for simplicity, among even your other posts, it's a challenge but well worth it.

Peace

Jason Pelle 21. Oct 2007: But how is this used? I don't get how this is called? Do you have a demo?

Jana 4. Sep 2008: fantastic! thanks for posting this, have been trawling through some of those 100 line implementations this is great!

scadza 14. Dec 2008

function yellowFade(el) {
var b = 155;
function f() {
el.style.background = 'rgb(255,255,'+ (b+=4) +')';
if (b < 255) {
setTimeout(f, 40);
}
};
f();
}

One more implementation....:)

scadza 14. Dec 2008

sorry i forgot to give actual link to above post.

http://peter.michaux.ca/articl...