JavaScript Kit > IE Filters reference > Transitions > Here
Fade Transition
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"> |
||||||||
| 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"> In the above example, when the Fade transition is played (using JavaScript, for example), the following sequence takes place:
|
||||||||
|
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:
Example: <script type="text/javascript"> |
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"> |
| stop() | Stops the transition playback. |
Fade Transition Demo
Beautiful castle for sale.
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>