VALUES Attribute | values Property

  • Article

This topic documents a feature of HTML+TIME 2.0, which is obsolete as of Windows Internet Explorer 9.

Sets or retrieves a list of one or more values specifying the progress of the transition.

Syntax

HTML <t:TRANSITIONFILTER VALUES = sValues... >
Scripting [ sValues = ] t:TRANSITIONFILTER.values [ = val ]

Possible Values

sValues Variant that specifies or receives a list of values. The values are semicolon-delimited, and applied over the course of the transition in the order they appear. Legal values are real numbers in the range 0.0-1.0.

The property is read/write. The property has no default value.

Remarks

values was introduced in Microsoft Internet Explorer 6.

This attribute can provide more precise control over the progress than a combination of the from attribute, the to attribute, and the by attribute; and overrides those attributes if they are specified.

When writing script to dynamically change the properties of an active animation, results might be unpredictable or undefined. Restart the animation with beginElement after you change the properties. The following example shows how to use beginElement.

<SCRIPT>
object.endElement();
object.values='.1;.17;.27;.37;.47;.56;.65;.71;.82;.92;1.0';
object.beginElement();
</SCRIPT>

For the animate object, the animateMotion object, and the animateColor object, the time2 behavior uses the following model to evaluate which properties to animate.

  • The values property, if specified, overrides any setting for the from property, the to property, or the by property.
  • The from property is used, unless the values property or the path property is specified.
  • The to property, if specified, overrides any setting for the by property.
  • The by property doesn't override any properties.

Example

This example shows how the values property affects the progress of the transition. The calcMode property determines how the values attribute is interpreted.

<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 BEGIN="oDiv1.begin" TYPE="barWipe" DUR="5" 
TARGETELEMENT="oDiv1" VALUES=".1;.17;.27;.37;.47;.56;.65;.71;.82;.92;1.0" 
CALCMODE="discrete"/>

<t:TRANSITIONFILTER BEGIN="oDiv1.begin" TYPE="barWipe" DUR="5" 
TARGETELEMENT="oDiv2" VALUES=".1;.17;.27;.37;.47;.56;.65;.71;.82;.92;1.0" 
CALCMODE="linear"/>

<INPUT TYPE="button" ID="oStartButton" VALUE="Start Transition">
<P>
<DIV CLASS="time"  begin="oStartButton.click" 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="oStartButton.click" 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>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/transitions/calcModeEX1.html

Applies To

t:TRANSITIONFILTER

See Also

Introduction to HTML+TIME, Using HTML+TIME Transitions