JavaScript Kit > IE Filters reference > Here

onfilterchange event handler

The onfilterchange event fires whenever a filter (specifically, a transition) changes state or completes its animation. It's useful when you wish to run code dependant on the state of the transition, such as immediately following its completion. There are 3 possible states of a transition, which you can probe using the transition's status property:

The onfilterchange event exists as a direct child property of the element that has the Transition(s) applied to it, and fires at each one of these states. In the below example, we alert a message when the filter has finished playing:

<style type="text/css">

#sample{
-ms-filter: "progid:DXImageTransform.Microsoft.RadialWipe(duration=3)";
filter: progid:DXImageTransform.Microsoft.RadialWipe(duration=3);
}

</style>


<div id="sample" style="width: 150px; height: 150px; background-color: green;">
&nbsp;
</div>


<script type="text/javascript">

var sample=document.getElementById("sample")

sample.filters[0].apply() //capture initial state of content
sample.style.backgroundColor="blue" //change content background to blue (not visible yet)
sample.filters[0].play() //play transition to reveal new background

sample.onfilterchange=function(){
if (sample.filters[0].status==0) //if filter has finished playing
alert("Transition has finished playing!")
}

</script>

When the onfilterchange event fires, you can probe which filter object fired it via IE's event.srcFilter property: