Detail Region and Effects Sample

This page demonstrates how to apply transition effects to a detail region on a page.

For this example, each time the user clicks on a product in the master region, we want the detail region to fade-out any content it is currently displaying and fade-in the new content. This translates into performing 3 steps:

  1. Fade out the detail region.
  2. Change the current row of the data set for the detail region.
  3. Fade in the detail region.

While this sounds simple, folks need to keep in mind that each of those steps performs its work asynchronously, so some care has to be used to make sure that things happen in the correct order. View the source for this sample to see how this is accomplished.

Also note that we had to specify a background color on the div with the "description" id to get around the IE "blocky/bold/jagged text" bug that occurs when programmatically adjusting the opacity on an element.

  • {name}
{desc}