JavaScript Kit > IE Filters reference > Transitions > Here
Blinds Transition (filter)
The Binds Transition reveals content by opening and closing "blinds" Defined via IE's CSS filter property and applied through JavaScript, here is its basic
syntax:
Syntax:
filter :progid:DXImageTransform.Microsoft.Blinds(attribute1=value1, attribute2=value2, etc);
Syntax (post IE8):
-ms-filter: "progid:DXImageTransform.Microsoft.Blinds(attribute1=value1, attribute2=value2, etc)";
Note: See "Difference in syntax between pre IE8 and IE8+ browsers" for more info on the changes to the filter syntax in IE8+.
Example:
<style type="text/css">
#somediv{
width: 90%;
-ms-filter:
"progid:DXImageTransform.Microsoft.Blinds(duration=5)";
filter
:progid:DXImageTransform.Microsoft.Blinds(duration=5);
}
</style>
<div id="somediv">Some
DIV</div>
Syntax Via Scripting
//To define a new Blinds filter on
an element
object.style.filter ="progid:DXImageTransform.Microsoft.Blinds(attribute=value1,
attribute2=value2)"
To access an existing property within the Blinds filter:
object.filters.item("DXImageTransform.Microsoft.Blinds").Property1=value1;
//To access an existing property within the Blinds 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 Blinds Transition:
Blinds Transition attributes (properties)
| Attributes/ Properties | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| bands | Sets the number of strips (blinds) applied to the
content. Default is 10 (strips). Valid values: 1 - 100 (integer) |
||||||||
| Direction | Sets the direction of the transition. Default is
"down". 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: <style type="text/css"> |
||||||||
| 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) |
||||||||
| status | Returns the current state of the transition. Valid values:
Example: <script type="text/javascript"> |
Blinds 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: <style type="text/css"> |
| stop() | Stops the transition playback. |
Blinds Transition Demo
Beautiful castle for sale.
Source:
<style type="text/css">
#sample{
-ms-filter: "progid:DXImageTransform.Microsoft.Blinds(duration=3)";
filter: progid:DXImageTransform.Microsoft.Blinds(duration=3);
width: 230px;
height: 230px;
background-color: black;
padding: 10px;
color: white;
}
</style>
<div id="sample">
<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>