Categories:

JavaScript Kit > IE Filters reference > Here

Transition examples

Last updated: October 14th, 2008

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:

Some Div.

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:

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:

My name is George

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>


Reference List

[an error occurred while processing this directive]

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.