JavaScript Kit > IE Filters reference > Here
Transition examples
Transitions are generally used to apply a visual effect when changing a content's appearance from one to the another. Below outlines the conditions and valid scenerios for defining transitions. Demos require IE 5.5+
Five way to apply a transition
Transitions can be applied in scenerios where the content changes visually
from one appearance to another. The content itself doesn't have to change, just its appearance. Specifically, this means you can
play a transition when changing an element's src
(for images), .innerHTML
, backgroundColor
, visibility
,
or display
properties.
Image src example
One of the most common usage of IE's Transitions is on images, when updating
an image's src
property with a new image file.
<style type="text/css">
#gallery{
-ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=2)";
filter:progid:DXImageTransform.Microsoft.Fade(duration=2);
}
</style>
<img id="gallery" src="day.gif" />
<script type="text/javascript">
var img=document.getElementById("gallery")
function gallerytransition(){
img.src="day.gif" //reset image src to original (in case demo is run more than
once)
img.filters[0].apply() //capture initial state of image (showing "day.gif")
img.src="night.gif" //change image to "night.gif" (though changes not visible
yet due to above capture
img.filters[0].play() //play transition to reveal update to image to "night.gif"
}
</script>
<form>
<input type="button" value="Run Transition" onClick="gallerytransition()"/>
</form>
innerHTML example
My brother plays in the morning.
<style type="text/css">
#mycontent{
width:200px;
background-color:lightyellow;
border:2px solid black;
padding: 5px;
-ms-filter: "progid:DXImageTransform.Microsoft.Pixelate(maxSquare=10,
duration=2, enabled=false)";
filter:progid:DXImageTransform.Microsoft.Pixelate(maxSquare=10, duration=2,
enabled=false);
}
</style>
<div id="mycontent">
<img src="brotherday.gif" /><br />
My brother plays in the morning.
</div>
<script type="text/javascript">
var mycontent=document.getElementById("mycontent")
function contenttransition(){
mycontent.innerHTML="<img src='brothermorning.gif' /><br />My brother plays in
the morning.." //reset DIV content to original (in case demo is run more than
once)
mycontent.filters[0].apply() //capture initial state of DIV (screenshot)
mycontent.innerHTML="<img src='brothernight.gif' /><br />And works at night..."
//change DIV's content (though changes not visible yet due to above capture
mycontent.filters[0].play() //play transition to reveal updated content
}
</script>
<form>
<input type="button" value="Run Transition" onClick="contenttransition()"/>
</form>
backgroundColor example
The following example adds a transition when the background color of a DIV changes.
Demo:
Source:
<style type="text/css">
#mycontent2{
width:150px;
height:150px;
background-color:navy;
color:white;
-ms-filter: "progid:DXImageTransform.Microsoft.Zigzag(duration=3, gridSizeX=5,
gridSizeY=5)";
filter:progid:DXImageTransform.Microsoft.Zigzag(duration=3, gridSizeX=5,
gridSizeY=5);
}
</style>
<div id="mycontent2">
Some Div.
</div>
<script type="text/javascript">
var mycontent2=document.getElementById("mycontent2")
function contenttransition2(){
mycontent2.style.backgroundColor="navy" //reset div color (in case demo is run more
than once)
mycontent2.filters[0].apply() //capture initial state of DIV (screenshot)
mycontent2.style.backgroundColor="red" //change DIV's bgColor to "red" (though
changes not visible yet due to above capture
mycontent2.filters[0].play() //play transition to reveal updated content
}
</script>
<form>
<input type="button" value="Run Transition" onClick="contenttransition2()"/>
</form>
Visibility example
Demo:
Welcome to JavaScript Kit
Source:
<style type="text/css">
#header{
width:90%;
visibility:visible;
-ms-filter: "progid:DXImageTransform.Microsoft.RandomBars(duration=1)";
filter:progid:DXImageTransform.Microsoft.RandomBars(duration=1);
}
</style>
<h2 id="header">Welcome to JavaScript Kit</h2>
<script type="text/javascript">
var header=document.getElementById("header")
function headertransition(){
header.style.visibility=(header.style.visibility=="hidden")? "visible" :
"hidden" //set to "hidden" initially
header.filters[0].apply() //capture initial state of header
header.style.visibility=(header.style.visibility=="hidden")? "visible" :
"hidden" //set to "visible"
header.filters[0].play() //play transition to reveal header
}
setInterval("headertransition()", 3000) //play transition every 3 seconds (make
sure it's greater than duration=1 (1 sec) above!
</script>
Display property example
In this example, a transition is played when one DIV is collapsed (display:
none
) while another is opened (display: block
).
Demo:
Source:
<style type="text/css">
#mycontent3{
width: 150px;
height: 150px;
background-color: navy;
color: white;
-ms-filter: "progid:DXImageTransform.Microsoft.RadialWipe(duration=3)";
filter: progid:DXImageTransform.Microsoft.RadialWipe(duration=3);
}
#sub1, #sub2{
width: 100%;
height: 100%;
}
</style>
<div id="mycontent3">
<div id="sub1">My name is George</div>
<div id="sub2" style="display: none; background-color: red;">I like to watch
movies</div>
</div>
<script type="text/javascript">
var mycontent3=document.getElementById("mycontent3")
var subdivs=mycontent3.getElementsByTagName("div")
function resetstate(){
subdivs[0].style.display="block" //show 1st sub content
subdivs[1].style.display="none" //hide 2nd sub content
}
function contenttransition3(){
resetstate() //reset state of the two divs (in case demo is run more than once)
mycontent3.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
mycontent3.filters[0].play() //play transition to reveal second sub content
}
</script>
<form>
<input type="button" value="Run Transition" onClick="contenttransition3()"/>
</form>