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.

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.

<img id="gallery" src="day.gif" style="filter:progid:DXImageTransform.Microsoft.Fade(duration=2)" />

<script type="text/javascript">

var img=document.getElementById("gallery")

function addtransition(){
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="addtransition()"/>
</form>

innerHTML example

My brother plays in the morning.

<div id="mycontent" style="width:200px; background-color:lightyellow; border:2px solid black; padding: 5px; filter:progid:DXImageTransform.Microsoft.Pixelate(maxSquare=10, duration=2, enabled=false)" />
<img src="brotherday.gif" /><br />
My brother plays in the morning.
</div>

<script type="text/javascript">
var divbox=document.getElementById("mycontent")

function addtransition(){
divbox.innerHTML="<img src='../scripts/brother.gif' /><br />My brother plays in the morning.." //reset DIV content to original (in case demo is run more than once)
divbox.filters[0].apply() //capture initial state of DIV (screenshot)
divbox.innerHTML="<img src='brothernight.gif' /><br />And works at night..." //change DIV's content (though changes not visible yet due to above capture
divbox.filters[0].play() //play transition to reveal updated content
}

</script>

<form>
<input type="button" value="Run Transition" onClick="addtransition()"/>
</form>

backgroundColor example

The following example adds a transition when the background color of a DIV changes.

Demo:

Source:

<div id="mycontent" style="width:150px; height:150px; background-color:navy; color:white; filter:progid:DXImageTransform.Microsoft.Zigzag(duration=3, gridSizeX=5, gridSizeY=5)" />
Some Div.
</div>

<script type="text/javascript">

var divbox=document.getElementById("mycontent")

function addtransition(){
divbox.style.backgroundColor="navy" //reset div color (in case demo is run more than once)
divbox.filters[0].apply() //capture initial state of DIV (screenshot)
divbox.style.backgroundColor="red" //change DIV's bgColor to "red" (though changes not visible yet due to above capture
divbox.filters[0].play() //play transition to reveal updated content
}
</script>

<form>
<input type="button" value="Run Transition" onClick="addtransition()"/>
</form>

Visibility example

Demo:

Welcome to JavaScript Kit

Source:

<h2 id="header" style="width:90%; visibility:visible; filter:progid:DXImageTransform.Microsoft.RandomBars(duration=1);">
Welcome to JavaScript Kit
</h2>

<script type="text/javascript">

var header=document.getElementById("header")

function addtransition(){
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("addtransition()", 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">

#mycontent{
width: 150px;
height: 150px;
background-color: navy;
color: white;
filter:progid:DXImageTransform.Microsoft.RadialWipe(duration=3);
}

#sub1, #sub2{
width: 100%;
height: 100%;
}

</style>

<div id="mycontent" />
<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 divbox=document.getElementById("mycontent")
var subdivs=divbox.getElementsByTagName("div")

function resetstate(){
subdivs[0].style.display="block" //show 1st sub content
subdivs[1].style.display="none" //hide 2nd sub content
}

function addtransition(){
resetstate() //reset state of the two divs (in case demo is run more than once)
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>

<form>
<input type="button" value="Run Transition" onClick="addtransition()"/>
</form>