Categories:

JavaScript Kit > IE Filters reference > Transitions > Here

Fade Transition

Last updated: October 30th, 2008

The Fade transition applies a fade effect to transition from one content to another, such as by overwriting old content with new instead using .innerHTML

Syntax:

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

Syntax (post IE8):

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

</style>


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

Syntax via scripting:

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

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

//To access an existing property within the Fade filter via the filters[] object
object.filters[x].Property1=value1 //where "x" is the position of the filter within list of filters on element

Note: When getting or setting a specific transition's attribute via scripting, you capitalize the attribute to turn it into a property. For example, attribute1 becomes Property1.

Below lists the attributes/properties of the Fade filter:

Fade Transition attributes (properties)

Attributes/ Properties Description
center Sets/ returns whether the fade effect should be centered. Default is true.

Valid values: true/ false

duration Sets/ returns the duration of the fade transition when it is run, in seconds.

Valid values: Number representing seconds (ie: 2.5).

enabled Sets/ returns whether the transition is enabled. Default is true.

Valid values: true/ false

Example:

<script type="text/javascript">
var mydiv=document.getElementById("test")
mydiv.filters.item("DXImageTransform.Microsoft.Fade").Enabled=false
</script>

overlap Sets the amount of time where the old and new content overlap and are shown simultaneously as the transition is being played as a fraction of the duration property's time.. The time is calculated by multiplying the value of overlap (0-1) with duration. See example below for more info.

Valid values: 0 - 1 (value divided by 100 to derive percentage)

Example:

<style type="text/css">

#somediv{
width: 90%;
-ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=10, overlap=0.2)";
filter:progid:DXImageTransform.Microsoft.Fade(duration=10, overlap=0.2);
}

</style>


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

In the above example, when the Fade transition is played (using JavaScript, for example), the following sequence takes place:

  1. For the first 4 seconds, the old content is being faded out.
  2. For the next 2 seconds (10 * 0.2), both the old and new content appear, by overlapping.
  3. For the final 4 seconds, the new content fades in.
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 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.Fade").status) //alerts status of transition
</script>

Fade 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 Fade transition is used to transition between an image that's changing from "dog.gif" to "cat.gif".

Example:

<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="dog.gif" />

<script type="text/javascript">

var img=document.getElementById("gallery")
img.filters[0].apply() //capture initial state of image (showing "dog.gif")
img.src="cat.gif" //change image to "cat.gif" (though changes not visible yet due to above capture
img.filters[0].play() //play transition to reveal update to image to "cat.gif"

</script>

stop() Stops the transition playback.

Fade Transition Demo


Beautiful castle for sale.

Play Transition

Source:

<style type="text/css">

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


Reference List

[an error occurred while processing this directive]

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