JavaScript Kit > IE Filters reference > Transitions > Here
Barn Transition (filter)
The Barn Transition reveals a content using the effect of opening/ closing doors. Defined via IE's CSS filter property and applied through JavaScript, here is its basic
syntax:
Syntax:
filter :progid:DXImageTransform.Microsoft.Barn(attribute1=value1, attribute2=value2, etc);
Example using inline CSS:
<div style="width: 90%; filter:progid:DXImageTransform.Microsoft.Barn(duration=5);">Some DIV</div>
Syntax Via Scripting
//To define a new Barn filter on
an element
object.style.filter ="progid:DXImageTransform.Microsoft.Barn(attribute=value1,
attribute2=value2)"
To access an existing property within the Barn filter:
object.filters.item("DXImageTransform.Microsoft.Barn").Property1=value1;
//To access an existing property within the Barn 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:
Barn Transition attributes (properties)
| Attributes/ Properties | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| 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.Barn(duration=5);">Some DIV</div> |
||||||||
| enabled | Sets/ returns whether the filter is enabled or not.
Default is true.Valid values: true/ false |
||||||||
| motion | Sets whether the new content is revealed from the
outside or the inside first. Default is out.Valid values: "in" or "out". |
||||||||
| orientation | Sets whether the transition effect is vertical or horizontal.
Default is vertical.Valid values: "vertical" or "horizontal". |
||||||||
|
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"> |
Barn 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 #1: <img id="gallery" src="dog.gif"
style="filter:progid:DXImageTransform.Microsoft.Barn(duration=5)" /> |
| stop() | Stops the transition playback. |
Barn
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.Barn(duration=3)">
<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>
