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);
Syntax (post IE8):
-ms-filter: "progid:DXImageTransform.Microsoft.Barn(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.Barn(duration=5)";
filter :progid:DXImageTransform.Microsoft.Barn(duration=5);
}
</style>
<div id="somediv">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: <style type="text/css"> |
||||||||
| 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: <style type="text/css"> |
| stop() | Stops the transition playback. |
Barn
Transition Demo
Beautiful castle for sale.
Source:
<style type="text/css">
#sample{
-ms-filter: "progid:DXImageTransform.Microsoft.Barn(duration=3)";
filter: progid:DXImageTransform.Microsoft.Barn(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>