DHTML Lab: Cross-Browser Visibility Transitions; Transitions 8-11,13,15,21,22 (Vertical/Horizontal Split-In)

Cross-Browser Visibility Transitions
transitions: 8,10,13,22: Split Vertical In
transitions: 9,11,15,21: Split Horizontal In

If you are using Explorer, the eight buttons in the left column perform eight different transitions. With Navigator, you will see only two different transitions. The first four act like transition 13 (Vertical Split In) and the final four like transition 15 (Horizontal Split In)

Vertical Split In

The Explorer Vertical Blinds (8), Checkerboard Across (10) and Random Bars Vertical (22) reveal transitions cannot be duplicated in Navigator, as they break the element into more than one piece. That is, non-adjacent parts of the element are visible at the same time. The behavior of these transitions is similar to that of transition 13 (Vertical Split In), which is a one-piece transition, easily duplicated in Navigator through clipping.

Therefore calling for transitions 8, 10, 13 and 22 will give different results in Explorer, but the same result in Navigator.

The case label, part II

When we introduced the switch statement, earlier, we write:

"switch matches an expression against a series of possible values. Each of these values is preceded by the case label. If a match is found, the statements immediately following are executed until the break statement is encountered."

Therefore, if we want more than one value to be associated with the same statements, we can simply list the appropriate case labels in succession. All statements until the break will be executed, and any intervening case labels will be overlooked:

case 8:
case 10:
case 13:
case 22:
    increment = halfW/visits;
    whichEl.transFunct = thirteen;
    break;

Since we will be clipping opposite sides (left and right), simultaneously, we base our increment on half the element width (halfW). All four transition calls are directed to function thirteen().

thirteen()

Function thirteen() clips both the right and left sides until the element has no width:

function thirteen(){
    this.clip.left += increment;
    this.clip.right -= increment;
    if (this.clip.width <= 0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

Horizontal Split In

The Explorer Horizontal Blinds (9), Checkerboard Down (11), Split Horizontal In (15) and Random Bars Horizontal (21) reveal transitions are the horizontal versions of transitions 8, 10, 13 and 22. For Navigator, all will have the same behavior as transition 15:

case 9:
case 11:
case 15:
case 21:
    increment = halfH/visits;
    whichEl.transFunct = fifteen;
    break;

fifteen()

Function fifteen() is simply the horizontal version of fourteen():

function fifteen(){
    this.clip.top += increment;
    this.clip.bottom -= increment;
    if (this.clip.height <= 0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

Now, let's reverse the clipping to create vertical and horizontal split-out transitions.