DHTML Lab: Cross-Browser Visibility Transitions; Transition 1 (Box-Out)

Cross-Browser Visibility Transitions
transition 1: box-out

The box-out transition is the first of our hidden-to-visible transitions. Remember, your element should be hidden to begin with. If it isn't, the routine will still work, but the impression given will be of a re-appearance of the element.

The Variables

The transition-specific variables are exactly the same as for the box-in transition, since the clipping logic is the same.

case 1:
    incW = halfW/visits;
    incrementW = (incW >= 1) ? parseInt(incW) : 0;
    xtraPixW = Math.round((incW - incrementW) * visits);
    incH = halfH/visits;
    incrementH = (incH >= 1) ? parseInt(incH) : 0;
    xtraPixH = Math.round((incH - incrementH) * visits);

    whichEl.clip.left += halfW;
    whichEl.clip.right -= halfW;
    whichEl.clip.top += halfH;
    whichEl.clip.bottom -= halfH;
    whichEl.visibility = "show";
    whichEl.transFunct = one;
    break;

Since our element is hidden, but full-size, we must first clip it to a point in the center, make it visible, then expand its size dynamically to simulate the box-out effect. We increment the left clip by half the width of the element (halfW), and decrement the right clip by the same amount. The top and bottom clips are moved by the value of halfH. The element now has no clip width or height, so we make it visible, assign the function one() as the transition function.

one()

In one(), as assumed, we follow the same procedure as in zero(), only the left and top clip properties are decremented, and right and bottom are incremented, expanding the size of the element.

We want our element to be restored to exactly its original size, so before any clipping is done, we always compare the current size of the element to the final size. If the difference in size is less than the increment values, it means that if we perform the next clip our element will be larger than its original size. This is easily possible, since the increment values are rounded integers.

Therefore, before we perform the horizontal clipping we check the horizontal size, and if the size difference is less than or equal to incrementW, we restore the element to its original size. Next time one() is called, the original size will be maintained, and no additional clipping will be performed.

if ((this.clip.left - this.origLeft) 

We perform the same check before vertical clipping. The complete one() function:

function one(){
  if ((this.clip.left - this.origLeft) <= incrementW) {
      this.clip.left = this.origLeft;
      this.clip.right = this.origRight;
  }        
  else {
    if (xtraPixW > 0) {
      if (xtraPixW 
  }
  if ((this.clip.top - this.origTop) 
    if (xtraPixH > 0) {
      if (xtraPixH 
  if (this.clip.left==this.origLeft &&
               this.clip.top==this.origTop)
    clearInterval(transTimer);
}

Before the function terminates, we compare the left and top clip values to origLeft and origTop. If they are the same, it means our element has been restored to its original size, so we cancel the function calls.

Next, a look at two similar transitions, circle-in and circle-out.