The wipe methods are animated versions of the clip methods (as slide is to the move methods).
When you want to use these functions all you have to do is include the dynlayer-wipe.js file after the dynlayer file:
A change in IE 5.0 causes clipping to be a bit of pain. What I recommend is before you do any wipes, reclip your layer using the clipTo() function - just use your initial CSS clip values.
objectName.clipTo(t,r,b,l) // use your CSS values // then do your wipe
The wipeTo() method will wipe (clip incrementally) the DynLayer's edges from their current value to specific new value. It can do this for any single edge, or multiple edges at the same time.
For any of the edges which you do not wish to be clipped, pass null for it's value.
To wipe the DynLayer's top edge to 0, right to 100, bottom to 100, and left to 0 (making a square box 100x100), in 10 steps, at 30 milliseconds per step:
To wipe only the right edge to 100:
Again the wipeBy() is the same as the wipeTo() except the edges are shifted a given number of pixels:
For any of the edges that you do not wish to be clipped pass 0 for it's value.
Wipe all edges "outward" by 20 pixels:
Wipe all edges "inward" by 20 pixels:
Wipe the right edge outward by 100 pixels:
When working with the wipe methods you have to keep your orientation correct. Remember how positive and negative values will effect each of the edges:
|Edge||Positive Increment||Negative Increment|
|left||subtracts from the edge||adds more to the edge|
|right||adds more to the edge||subtracts from the edge|
|top||subtracts from the edge||adds more to the edge|
|bottom||adds more to the edge||subtracts from the edge|
Example: wipe1.html [source] - variations of the wipe methods