JavaScript Kit > IE Filters reference > Transitions > Here

Iris Transition (filter)

The Iris Transition reveals new content using an Iris effect (similar to a camera shutter opening). Defined via IE's CSS filter property and applied through JavaScript, here is its basic syntax:

Syntax:

filter :progid:DXImageTransform.Microsoft.Iris(attribute1=value1, attribute2=value2, etc);

Syntax (post IE8):

-ms-filter: "progid:DXImageTransform.Microsoft.Iris(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.Iris(duration=5)";
filter :progid:DXImageTransform.Microsoft.Iris(duration=5);
}

</style>


<div id="somediv">Some DIV</div>

Syntax Via Scripting

//To define a new Iris filter on an element
object.style.filter ="progid:DXImageTransform.Microsoft.Iris(attribute=value1, attribute2=value2)"

To access an existing property within the Iris filter:
object.filters.item("DXImageTransform.Microsoft.Iris").Property1=value1;

//To access an existing property within the Iris 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 Iris Transition:

Iris 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
irisStyle	Sets the shape of the Irish effect. Default is "PLUS". Valid values (string): "DIAMOND", "CIRCLE", "CROSS", "PLUS", "SQUARE", or "STAR". Example: <style type="text/css"> #somediv{ width: 90%; -ms-filter: "progid:DXImageTransform.Microsoft.Iris(duration=5, irisStyle=DIAMOND)"; filter :progid:DXImageTransform.Microsoft.Iris(duration=5, irisStyle=DIAMOND); } </style> <div id="somediv">Some DIV</div>
motion	Sets whether the new content is revealed from the outside or the inside first. Default is "out". Valid values (string): "in" or "out".
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: Value description 0 Transition has stopped. 1 Transition has been successfully applied. 2 Transition is playing. Example: <script type="text/javascript"> var mydiv=document.getElementById("test") alert(mydiv.filters.item("DXImageTransform.Microsoft.Iris").status) //alerts status of transition </script>

Iris 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). In this following example, the Iris transition is used to transition between two contents when hiding the first content before revealing the second (using CSS's "display" property). Example: <style type="text/css"> #mycontent{ width: 200px; height: 200px; background-color: black; color: white; -ms-filter: "filter:progid:DXImageTransform.Microsoft.Iris(duration=3)"; filter:progid:DXImageTransform.Microsoft.Iris(duration=3); } #sub1, #sub2{ width: 100%; height: 100%; } </style> <div id="mycontent" /> <div id="sub1">This is sub content 1</div> <div id="sub2" style="display: none; background-color: red;">This is sub content 2</div> </div> <script type="text/javascript"> var divbox=document.getElementById("mycontent") var subdivs=divbox.getElementsByTagName("div") divbox.filters[0].apply() //capture initial state of DIV (screenshot) subdivs[0].style.display="none" //hide 1st sub content subdivs[1].style.display="block" //show 2nd sub content divbox.filters[0].play() //play transition to reveal second sub content </script>
stop()	Stops the transition playback.

Iris Transition Demo

Play Transition

Source:

<style type="text/css">

#sample{
-ms-filter: "progid:DXImageTransform.Microsoft.Iris(duration=3,irisStyle=STAR)";
filter:progid:DXImageTransform.Microsoft.Iris(duration=3,irisStyle=STAR);
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>