MODE Attribute | mode Property

Internet Development Index

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

Syntax

HTML<t:TRANSITIONFILTER MODE = sMode... >
Scriptingt:TRANSITIONFILTER.mode [ = sMode ]

Possible Values

sModeString that specifies or receives one of the following values.
inDefault. Determines that the element transitions in.
outDetermines that the element transitions out.

The property is read/write. The property has a default value of in.

Remarks

The legal value of in indicates that the transition content becomes more visible as the transition progress increases, and 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. Authors can use the begin attribute on the transitionFilter to indicate the begin time for the transitionFilter.

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 will disappear for a moment and transition in. If MODE is set to out, then the media element will transition out and then immediately reappear.

You cannot return the default value of the mode property through script unless the default value has been set by the attribute or through script.

Example

The example below demonstrates the use of the mode attribute to transition renderable content in and out of visibility.

<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>
This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Applies To

t:TRANSITIONFILTER

See Also

Introduction to HTML+TIME, Using HTML+TIME Transitions, end