JavaScript Kit > IE Filters reference > Transitions > Here
Inset Transition (filter)
The Inset Transition shows new content using a diagonal reveal effect.. Defined via IE's CSS filter
property and applied through JavaScript, here is its basic
syntax:
Syntax:
filter :progid:DXImageTransform.Microsoft.Inset(attribute1=value1, attribute2=value2, etc);
Syntax (post IE8):
-ms-filter: "progid:DXImageTransform.Microsoft.Inset(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.Inset(duration=5)";
filter
:progid:DXImageTransform.Microsoft.Inset(duration=5);
}
</style>
<div id="somediv">Some
DIV</div>
Syntax Via Scripting
//To define a new Inset filter on
an element
object.style.filter ="progid:DXImageTransform.Microsoft.Inset(attribute=value1,
attribute2=value2)"
To access an existing property within the Inset filter:
object.filters.item("DXImageTransform.Microsoft.Inset").Property1=value1;
//To access an existing property within the Inset 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 Inset Transition:
Inset 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) |
||||||||
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 * This property accessible via scripting only |
Returns the current state of the transition. Valid values:
Example: <script type="text/javascript"> |
Inset 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.Inset(duration=3)" /> |
stop() | Stops the transition playback. |
Inset 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.Inset(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>