[thelist] Javascript (Math Skills Needed)

[Phil Turmel]

Jon Hughes wrote:
 > I got this snippet from Jeremy Keith's book, and modified it 
slightly:
 >
 > function fader(element,red,green,blue) {
 >   if (element.fade) {
 >    clearTimeout(element.fade);
 >   }
 >   element.style.backgroundColor = 
"rgb("+red+","+green+","+blue+")";
 >   if (red == 255 && green == 255 && blue == 255) {
 >    return;
 >   }
 >   var newred = red + Math.ceil((255 - red)/10);
 >   var newgreen = green + Math.ceil((255 - green)/10);
 >   var newblue = blue + Math.ceil((255 - blue)/10);
 >   var repeat = function() {
 >    fader(element,newred,newgreen,newblue)
 >   };
 >   element.fade = setTimeout(repeat,100);
 >  }
 >
 > Basically, this will fade the element from your rgb value to 
white...
 > but I don't want it to fade to white, I want it to fade to:
 > R: 243, G: 244, B: 255 --- #F3F4FF
 >
 > I tried replacing values, but I honestly have no idea what the 
math is
 > doing, so it makes it extremely difficult for me to edit.
 >
 > Does anyone know a way to fade any color to the color I want?
 >
 > Thanks,
 >
 >  - Jon
Jon,

With a few substitutions (untested), should converge from
original (red,green,blue) to target (red2,green2,blue2):

function digitalfilter(a,b,denominator) {
   var c = a + (b - a)/denominator;
   if (c < b)
     c = Math.ceil(c);
   else
     c = Math.floor(c);
   return c;
}

function fader(element,red,green,blue,red2,green2,blue2) {
   if (element.fade) {
     clearTimeout(element.fade);
   }
   element.style.backgroundColor = rgb("+red+","+green+","+blue+")";
   if (red == red2 && green == green2 && blue == blue2) {
     return;
   }
   var newred = digitalfilter(red,red2,10);
   var newgreen = digitalfilter(green,green2,10);
   var newblue = digitalfilter(blue,blue2,10);
   var repeat = function() {
     fader(element,newred,newgreen,newblue,red2,green2,blue2)
   };
   element.fade = setTimeout(repeat,100);
}



Let us know how it turns out...

Phil