AJAX - The Complete Reference

PART II

Chapter 8: User Interface Design for Ajax 353

if (opacity != 100 && opacity != 0)

setTimeout(function(){changeOpacity(obj, opacity, decrease);}, 10);

}

changeOpactity(object1, 100, true); // fade object 1 in

changeOpactity(object2, 0, true); // fade object 2 out

A working example of fading page objects in and out can be found at http://ajaxref

.com/ch8/fade.html.

As an example of fading to show change, the idea can be slightly modified to demonstrate

a popular content spotlighting technique often dubbed the “simple yellow fade.” The idea of

this transition is to spotlight newly provided content by giving it a bright background such as

yellow and fading the background color away over a short period of time.

The approach here is slightly different than the fade and reveal; instead of using an

opacity value, the background color is set progressively lighter from an initial value. When

the callback from the Ajax call is invoked, the data from the packet is inserted into a div

and the background color of the div is set to a solid yellow value. Then a function

startFade() is called, which takes the object, a start color, an end color, and

a duration for the fading.

function handleResponse(response)

{

var message = document.getElementById("message");

message.innerHTML = response.xhr.responseText;

/* spotlight the data and fade out */

message.style.backgroundColor = "yellow";

startFade(message, "#FFFF00", "#FFFFFF", 1000);

}

The fading sets the initial value and the final value and a timer to adjust the value

toward the final in set increments. The code is a little bulky, mostly because Web designers

often want to set familiar hex values for colors, but the calculations for moving from one

color to the next are easier to perform in decimal RGB values.

function startFade(obj, startColor, endColor, duration)

{

var startRGB = hexToRGB(startColor);

var endRGB = hexToRGB(endColor);