DHTML Lab: Cross-Browser Visibility Transitions; Transitions 14&16 (Vertical/Horizontal Split-Out) - WebReference.com

Cross-Browser Visibility Transitions
transitions 14&16: Split Vertical/Horizontal Out

Transition 12: Random Dissolve

In combining transitions on the previous page, we skipped transition 12 (Random Dissolve).

Navigator cannot duplicate this transition either, since it splits the element into many pieces as it dissolves from one state to another. We can simulate it, however, using a partly-transparent GIF image, as we did with our Dynamic Headline Fader in column 13. Since we are creating a one-external-file transition library, we will not create any image-based workarounds. Instead, we will direct transition 12 to act like transition 0 (Box-In) for Navigator. We, therefore, modify the case label for 0:

case 0:
case 12:
	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.transFunct = zero;
	break;

Split Vertical Out

The variables are the same as with Split Vertical In. Since this is a hidden-to-visible transition, we also clip the element's width to 0, and make it visible before calling the function for the first time.

case 14:
    increment = halfW/visits;
    whichEl.clip.left += halfW;
    whichEl.clip.right -= halfW;
    whichEl.visibility = "show";            
    whichEl.transFunct = fourteen;
    break;

fourteen()

Since we are expanding the size of the element, we make our usual current size-final size comparison. If we find that we have an increment or less to go, we restore the element to its full size and clear the timer:

function fourteen(){
    if ((this.clip.left - this.origLeft) <= increment) {
        this.clip.left = this.origLeft;
        this.clip.right = this.origRight;
        clearInterval(transTimer);
    }
    else {
        this.clip.left -= increment;
        this.clip.right += increment;
    }
}

Split Horizontal Out

The increment is based on the height of the element and the element's height is reduced to 0 before the function is called. Otherwise, the setup procedure for transition 16 is the same as that for 14.

case 16:        
    increment = halfH/visits;
    whichEl.clip.top += halfH;
    whichEl.clip.bottom -= halfH;
    whichEl.visibility = "show";
    whichEl.transFunct = sixteen;
    break;

sixteen()

Simply, a horizontal version of fourteen():

function sixteen(){
    if ((this.clip.top - this.origTop) <= increment) {
        this.clip.top = this.origTop;
        this.clip.bottom = this.origBottom;
        clearInterval(transTimer);
    }
    else {
        this.clip.top -= increment;
        this.clip.bottom += increment;
    }
}

Hang on, we're almost finished. Next page, we look at the "strips" transitions.