|
|
Method | 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 to
transition to the element's new content state. Supports an optional
duration parameter that, if set, overrides the
value of the duration attribute set when defining the transition. |
stop() | Stops the transition playback. |
These methods exist not directly on the element with the transition
added, but the element's
filters[]
object, which contains a collection of all filters and
transitions added to the element. With an element that only has one
transition defined, element.filters[0]
gives us access to that
transition, while element.filters[0].apply()
for example
invokes said method.
To play a transition you need to call apply()
and play()
at a minimum in a specific order:
apply()
before the image or content changes state,
to capture its "pre" state.src
"
or "innerHTML
" property, for example.play()
to play the transition over the
content's changing of state.The important thing here is that the changing of the content's state -or
step 2- should always be sandwiched between apply()
and play()
.
A content state change can be anything from changing the content's CSS "visibility
"/ "display
" properties, "src
" (if an image), or
".innerHTML
". With that said, here's Take 2 of our
demonstration above, this time, with a groovy "GradientWipe"
transition added:
<style type="text/css">
#fancyvocation{
-ms-filter: "progid:DXImageTransform.Microsoft.GradientWipe(duration=2)";
filter :progid:DXImageTransform.Microsoft.GradientWipe(duration=2);
}
</style>
<script type="text/javascript">
function changeimagealt(){
var myimage=document.getElementById("fancyvocation")
if (myimage.filters && myimage.filters.length>0) //if filters[] collection is
defined (only in IE)
myimage.filters[0].apply()
myimage.src=(myimage.src.indexOf("day.jpg")!=-1)? "night.jpg" : "day.jpg"
//alternate between two images to change to
if (myimage.filters && myimage.filters.length>0)
myimage.filters[0].play(2) //2 seconds transition
}
</script>
<img id="fancyvocation" src="day.jpg" /><br />
<a href="javascript:changeimagealt()">Change image</a>
Note the test for the filters[]
object first to make sure
that not only is this object defined on the element, but that an actual
filter/transition exists (length is greater than 0). This ensures our final code is
cross browser friendly.
Apart from the aforementioned 3 methods, all IE transitions also share a few properties that may come in handy for more intricate set ups:
Property |
Description |
Duration | Sets/ gets the length of time in seconds the transition takes to complete. Attribute: duration. |
Enabled | Boolean that sets or retrieves the state of the transition (either enable or disable it). Attribute: enabled. |
status | Integer that returns the status of the transition:
|
For example, to probe at any time whether the transition is still running on the element, you could construct the below test:
if (myimage.filters[0].status==2){
//transition is still running
}
hidden
" to "visible
"As mentioned, a transition can be applied during a content's changing of
state, which includes changing the content's CSS "visibility
"
or "display
" properties, "src
" (if an image), or
".innerHTML
" properties. To illustrate this fact, the
below plays a transition on an element when its "visibility
"
property is set to "visible
", in effect, transitioning into
itself:
<style type="text/css">
#mytext{
-ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=2)";
filter :progid:DXImageTransform.Microsoft.Fade(duration=2);
visibility: hidden;
width: 300px;
line-height: 24px;
font: normal 24px navy;
}
</style>
<script type="text/javascript">
function fadetext(){
var mytext=document.getElementById("mytext")
mytext.style.visibility="hidden"
if (mytext.filters && mytext.filters.length>0) //if filters[] collection is
defined (only in IE)
mytext.filters[0].apply()
mytext.style.visibility="visible"
if (mytext.filters && mytext.filters.length>0)
mytext.filters[0].play()
}
</script>
<div id="mytext">JavaScript kit</div>
<a href="javascript: fadetext()">Fade into view</a>
We now have all the pieces in place to create a full blown image slideshow that takes advantage of IE Transitions...