DHTML Lab: Cross-Browser Visibility Transitions; Transitions 4 - 7 (Wipes)

Cross-Browser Visibility Transitions
transitions 4-7: wipes

The simplest of all our transitions are the four "wipe" transitions. They involve the clipping of one side only for a visible-to-hidden effect.

For vertical wipes (transitions 4 and 5) we determine the clip increment by simply dividing the complete original height (fullH) by the number of function visits (visits):

case 4:
    increment = fullH/visits;
    whichEl.transFunct = four;
    break;
case 5:
    increment = fullH/visits;
    whichEl.transFunct = five;
    break;

For horizontal wipes we divide the full width by visits:

case 6:
    increment = fullW/visits;
    whichEl.transFunct = six;
    break;
case 7:
    increment = fullW/visits;
    whichEl.transFunct = seven;
    break;

four()

For the wipe-up transition, we clip the bottom side of the element by the increment on every function visit. When the height has been completely clipped away, the function calls are cancelled and hideIt() is called to hide the element and restore it to its original size.

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

five()

The wipe-down transition is identical to wipe-up, only we clip the top side:

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

six()

To perform a wipe-right, we clip the left side of the element:

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

seven()

Finally, the wipe-left transition involves clipping the right side.

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