mode property

Sets or gets a variable that indicates whether an element transitions in or out.

Syntax

JScript
object.mode = sModesMode = object.mode

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

transitionFilter

Reference

end

Conceptual

Introduction to HTML+TIME

Using HTML+TIME Transitions