AJAX - The Complete Reference

354 Part II: Developing an Ajax Library^

var diffRGB = {};

diffRGB.r = endRGB.r - startRGB.r;

diffRGB.g = endRGB.g - startRGB.g;

diffRGB.b = endRGB.b - startRGB.b;

var steps = duration/20;

changeBackgroundColor(obj, startRGB, diffRGB, steps, 1);

}

function changeBackgroundColor(obj, startRGB, diffRGB, steps, currentStep)

{

var curRGB = {};

curRGB.r = startRGB.r + Math.round((diffRGB.r/steps) * currentStep);

curRGB.g = startRGB.g + Math.round((diffRGB.g/steps) * currentStep);

curRGB.b = startRGB.b + Math.round((diffRGB.b/steps) * currentStep);

obj.style.backgroundColor = 'rgb('+curRGB.r+','+curRGB.g+','+curRGB.b+')';

if (currentStep != steps)

setTimeout(function(){changeBackgroundColor(obj, startRGB, diffRGB,

steps, ++currentStep);}, 20);

}

function hexToRGB(hex)

{

hex = hex.toUpperCase( );

if( hex.substring(0,1)=='#')

hex = hex.substring(1);

var rgb = {};

rgb.r = parseInt(hex.substring(0,2), 16);

rgb.g = parseInt(hex.substring(2,4), 16);

rgb.b = parseInt(hex.substring(4,6), 16);

return rgb;

}

A simple example of this highlighting technique can be found at http://ajaxref.com/

ch8/fadein.html.

The number of transitions possible is staggering: we can slide objects in and out, use

iris- and checkerboard-style dissolves and reveals, puff up and reduce objects, shake them,

or perform whatever other type of transition we may desire. Figure 8-7 shows a transition

explorer example based upon the script.aculo.us (http://script.aculo.us/) library. The

example can be found at http://ajaxref.com/ch8/effects.html.

While the various transitions and activity indications associated with Ajax can be fun at

first, we need to be aware that in many cases they are simply eye candy and they can wear

on the user over time. We strongly encourage aspiring Ajax developers not to simply

replace the annoying full page refreshes with fancy JavaScript transitions, as this may not

only annoy users, but also potentially eliminate many of the user’s perceived speed gains

received from the reduction of data transfer.