mode property
Sets or gets a variable that indicates whether an element transitions in or out.
Syntax
| JScript |
|---|
|
Property values
Type: String
one of the following values.
Remarks
mode was introduced in Microsoft Internet Explorer 6.
The legal value of in indicates that the transition content becomes more visible as the transition progress increases, and the value of out indicates that the transition content becomes less visible as the transition progress increases. The mode attribute does not automatically tie the transitionFilter to the beginning or end of the media. Use the begin attribute on the transitionFilter to indicate the begin time.
You can apply a transition to a media element at any time during its active period. If MODE is set to in and the t:TRANSITIONFILTER is applied to the media element in the middle of its active period, then the media element disappears for a moment and transitions in. If MODE is set to out, then the media element transitions out and immediately reappears.
You cannot return the default value of the mode property through script unless the default value is set by the attribute or through script.
Examples
The example below demonstrates the use of the mode attribute to transition renderable content in and out of visibility.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/transitions/modeEX1.html
<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time{behavior: url(#default#time2);}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<t:TRANSITIONFILTER TYPE="barWipe" DUR="3" TARGETELEMENT="oDiv1" MODE="in"
ID="transitionPlay1"/>
<t:TRANSITIONFILTER TYPE="barWipe" DUR="3" TARGETELEMENT="oDiv2" MODE="out"
ID="transitionPlay2"/>
<DIV CLASS="time" BEGIN="0" ID="oDiv1" DUR="indefinite"
STYLE="position:relative; left:20px; width:420px; height:100px;
background-image:url(ART_time_progress.gif); background-repeat: no-repeat;">
</DIV>
<DIV CLASS="time" BEGIN="0" ID="oDiv2" DUR="indefinite"
STYLE="position:relative; left:20px; width:420px; height:100px;
background-image:url(ART_time_progress.gif); background-repeat: no-repeat;">
</DIV>
</BODY>
</HTML>
See also
Reference
Conceptual