First the stepper

This simply adds the given fx.end.name to the given elements classes, if not existing and appends the count of steps to the classname. The fx.state is a float between 0 and 1 and is multiplied with fx.end.steps which you give to the animation as you will see downwards.

$.fx.step['class+'] = function(fx){
    var r = RegExp(fx.end.name + '\\d*','g');
    if( !r.test(fx.elem.className) ) {
        fx.elem.className += ' ' + fx.end.name;
    }
    fx.elem.className = fx.elem.className.replace(
        r, fx.end.name + parseInt( fx.end.steps * fx.state )
    );
}

$.fx.step['class-'] = function(fx){
    if( fx.state == 1 ) {
        fx.elem.className = fx.elem.className.replace(
            RegExp(fx.end.name + '\\d*','g'),''
        );
    }
    fx.elem.className = fx.elem.className.replace(
        RegExp(fx.end.name + '\\d*'),
        fx.end.name + parseInt( fx.end.steps - fx.end.steps * fx.state )
    );
}

Second the css classes

You would generate them with any color blender available in the wild. I extended this one by Eric Meyer to get 100 shades.

.hl0 { color: #000000; }
.hl1 { color: #030303; }
.hl2 { color: #050505; }
.hl3 { color: #080808; }
…
.hl93 { color: #EDEDED; }
.hl94 { color: #F0F0F0; }
.hl95 { color: #F2F2F2; }
.hl96 { color: #F5F5F5; }
.hl97 { color: #F7F7F7; }
.hl98 { color: #FAFAFA; }
.hl99 { color: #FCFCFC; }
.hl100 { color: #FFFFFF; }

Third the usage

Now you can play with your css class stepper, that should be pretty self-explaining, the counterpart to this example is the ‘class-’ stepper.

$('.query').animate({
    'class+':{ 'name':'hl', 'steps':100 }
},{
    'duration':400, 'queue':0
});