<div id="mycontent" style="width:200px; background-color:lightyellow; border:2px solid black; padding: 5px; filter:progid:DXImageTransform.Microsoft.Pixelate(maxSquare=10, duration=2, enabled=false)" />

<img src="brotherday.gif" /><br />

My brother plays in the morning.

</div>

 
<script type="text/javascript">

var divbox=document.getElementById("mycontent")

 
function addtransition(){

divbox.innerHTML="<img src='../scripts/brother.gif' /><br />My brother plays in the morning.." //reset DIV content to original (in case demo is run more than once)

divbox.filters[0].apply() //capture initial state of DIV (screenshot)

divbox.innerHTML="<img src='brothernight.gif' /><br />And works at night..." //change DIV's content (though changes not visible yet due to above capture

divbox.filters[0].play() //play transition to reveal updated content

}

 
</script>

 
<form>

<input type="button" value="Run Transition" onClick="addtransition()"/>

</form>