<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> |
