The following example shows how to change the effects of this transition by modifying its StretchStyle property.
<SCRIPT>
<!-- Declare an array and index counter to access the stretchStyles. -->
var arrStretchStyles = new Array();
arrStretchStyles = ['HIDE','PUSH','SPIN'];
var iIndexCount = 0;
var bToggle = 0;
function fnToggle() {
<!-- Use the array index to update and display the stretchStyle used. -->
var iStyleIndex = iIndexCount%3 ; // MOD function avoids resetting the counter.
oDiv.filters[0].stretchstyle = arrStretchStyles[iStyleIndex];
oSpan.innerText = 'StretchStyle = "' + arrStretchStyles[iStyleIndex] + '"';
oDiv.filters[0].Apply();
// After setting Apply, changes to the oDiv object
// are not displayed until Play is called.
if (bToggle) {
bToggle = 0;
oDiv.style.backgroundColor="gold";
}
else {
bToggle = 1;
oDiv.style.backgroundColor="green";
}
oDiv.filters[0].Play();
iIndexCount += 1;
}
</SCRIPT>
<BUTTON >Toggle Transition</BUTTON><BR/><BR/>
<FONT SIZE="+4" >
<!-- This DIV is the target of the transition. -->
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
filter:progid:DXImageTransform.Microsoft.Stretch(
duration=3);">
TEXT<BR/>TEXT<BR/>TEXT<BR/>TEXT<BR/>
</DIV>
<SPAN ID="oSpan"></SPAN>
</FONT>