JavaScript Kit > IE Filters reference > Transitions > Here
CheckerBoard Transition (filter)
The CheckerBoard Transition reveals new content by uncovering squares placed
like a checkerboard over the original content. Defined via IE's CSS filter property and applied through JavaScript, here is its basic
syntax:
Syntax:
filter :progid:DXImageTransform.Microsoft.CheckerBoard(attribute1=value1, attribute2=value2, etc);
Example using inline CSS:
<div style="width: 90%; filter:progid:DXImageTransform.Microsoft.CheckerBoard(duration=5);">Some DIV</div>
Syntax Via Scripting
//To define a new CheckerBoard filter on
an element
object.style.filter ="progid:DXImageTransform.Microsoft.CheckerBoard(attribute=value1,
attribute2=value2)"
To access an existing property within the CheckerBoard filter:
object.filters.item("DXImageTransform.Microsoft.CheckerBoard").Property1=value1;
//To access an existing property within the CheckerBoard filter via the
filters[] object
object.filters[x].Property1=value1 //where "x" is
the position of the filter within list of filters on element
Below lists the attributes/properties of the Barn Transition:
CheckerBoard Transition attributes (properties)
| Attributes/ Properties | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Direction | Sets the direction of the transition. Default is
"right". Valid values (string): "up", "down", "left", or "right" |
||||||||
| duration | Sets the duration of time the transition takes to
complete, in seconds. No default value. Valid values: Floating point number greater than 0 (seconds implied, ie: 2.5 means 2.5 seconds) Example: <div style="width: 200px; height: 200px; background-color: yellow; filter:progid:DXImageTransform.Microsoft.CheckerBoard(duration=5);">Some DIV</div> |
||||||||
| enabled | Sets/ returns whether the filter is enabled or not.
Default is true.Valid values: true/ false |
||||||||
|
Percent * This property accessible via scripting only |
Sets the point in which to capture the display of the content to apply the
transition on. Default is 0. Valid values: 0 - 100 (percentage implied) |
||||||||
| squaresX, squaresY | Sets the number of columns and rows of squares,
respectively, to apply to the content for the transiiton. SquaresX
has a default value of 12, and SquaresY has a default value of 10. Valid values: Integer greater or equal to 2. Example: <div id="mycontent" style="width:150px;
height:150px; background-color:navy; color:white;
filter:progid:DXImageTransform.Microsoft.CheckerBoard(squaresX=8,
squaresY=8)" /> |
||||||||
| status | Returns the current state of the transition. Valid values:
Example: <script type="text/javascript"> |
CheckerBoard Transition methods
| Methods | Description |
|---|---|
| apply() | Captures the initial display of the content in
preparation for the transition to be played (using the play()
method). No visible changes to the content made at this point. |
| play([duration]) | Plays the transition in question. Supports an
optional duration parameter that, if set, overrides the
value of the duration property above in specifying the duration of
the transition (in seconds).Example: <div id="mycontent" style="width:150px;
height:150px; background-color:navy; color:white;
filter:progid:DXImageTransform.Microsoft.CheckerBoard(squaresX=8,
squaresY=8)" /> |
| stop() | Stops the transition playback. |
CheckerBoard Transition Demo
Beautiful castle for sale.
Source:
<div id="sample" style="width: 230px; height: 230px;
background-color: black; padding: 10px; color: white;
filter:progid:DXImageTransform.Microsoft.CheckerBoard(duration=3,squaresX=8,
squaresY=8)">
<img src="castle.jpg" /><br />
<b>Beautiful castle for sale.</b>
</div>
<p><a href="javascript:playtransition()">Play Transition</a></p>
<script type="text/javascript">
var sample=document.getElementById("sample")
function playtransition(){
sample.innerHTML='<img src="castle.jpg" /><br /><b>Beautiful castle for
sale.</b>' //reset DIV to original content (in case demo is run more than once).
sample.filters[0].apply() //capture initial state of image (showing
"castle.gif")
sample.innerHTML='<img src="castleinside.jpg" /><br /><b>Interior is elegant yet
modern!</b>'
sample.filters[0].play() //play transition to reveal new image and description
}
</script>
