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

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


Cross-Browser Visibility Transitions
transition 1: box-out

Click the button below
to show the element

IE4 behavior:
  as described
NS4 behavior:
Boldsame as IE4
BItalicsimilar to IE4
Italicother trans substituted
Box in 0
Box out 1
Circle in 2
Circle out 3
Wipe up 4
Wipe down 5
Wipe right 6
Wipe left 7
Vertical blinds 8
Horizontal blinds 9
Checkerboard across10
Checkerboard down11
Random dissolve12
Split vertical in13
Split vertical out14
Split horizontal in15
Split horizontal out16
Strips left down17
Strips left up18
Strips right down19
Strips right up20
Random bars horizontal21
Random bars vertical22

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;

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.


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 &&

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.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Apr. 28, 1998
Revised: Apr. 28, 1998

URL: http://www.webreference.com/dhtml/column19/transBoxOut.html