TO Attribute | to Property (t:ANIMATECOLOR)

HTML (DHTML)

previous page next page

TO Attribute | to Property

Sets or retrieves the ending value of a color attribute or property animated by t:ANIMATECOLOR

Syntax

HTML <t:ANIMATECOLOR TO = vValue... >
Scripting t:ANIMATECOLOR.to(val) [ = vValue ]

HTML	<t:ANIMATECOLOR TO = vValue... >
Scripting	t:ANIMATECOLOR.to(val) [ = vValue ]

Possible Values

vValue Variant that specifies or receives the ending value of the animation.
The property is read/write. The property has no default value.

Remarks

The by property cannot be used on the same element as the to property. If both properties are specified, the by value is ignored.
In the context of t:ANIMATECOLOR, valid attribute values are hexadecimal RGB values or the keywords that represent them (for example, #8A2BE2 or blueviolet). For more information about supported color values, see the Color Table.
Setting the to property without also setting the from property can affect values set for the additive property. For more information, see the additive reference.
When writing script to dynamically change the properties of an active animation, developers should consider a couple of issues. Because results might be unpredictable or undefined when you change the properties of an active animation, restart the animation with beginElement after you have made the change. For example:
<SCRIPT>
object.endElement();
object.to='#7FFFD4';
object.beginElement();
</SCRIPT>
For the animate, animateMotion, and animateColor objects, the time2 behavior uses the following model to evaluate which properties to animate.
The values property, if specified, overrides any setting for the from, to, or by properties.
The from property is used unless the values or path properties are specified.
The to property, if specified, overrides any setting for the by property.
The by property doesn't override any properties.

Example

The following example uses two t:ANIMATECOLOR elements to animate the backgroundColor of two DIV elements, outerDIV and innerDIV. The inner DIV begins with its backgroundColor set to yellow, which is animated to red over a five-second duration. The outer DIV is animated from red to yellow over the same duration.
The Show Me example provides several colored buttons; clicking one of them sets the from attribute of the inner DIV's animation element to that button's color value, and likewise sets the to attribute of the outer DIV's animation element.
<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<t:PAR id="p1" begin="0" dur="15" fill="hold">
<t:ANIMATECOLOR id="a1" attributeName="background-color" from="red" to="
yellow" targetElement="outerDIV" begin="0" dur="5" fill="hold"/>
<t:ANIMATECOLOR id="a2" attributeName="background-color" from="yellow"
to="red" targetElement="innerDIV" to="#0000FF" begin="0" dur="5"
fill="hold"/>
</t:PAR>
<DIV id="outerDIV" class="time" style="FONT-SIZE: 18px; LEFT: 118px;
BORDER: black 1px solid; WIDTH: 279px; POSITION: absolute; TOP: 240px;
HEIGHT: 217px; BACKGROUND-COLOR: red; TEXT-ALIGN: left; padding-left:3">
outerDIV</DIV>
<DIV id="innerDIV" class="time" style="FONT-SIZE: 18px; LEFT: 162px;
WIDTH: 188px; POSITION: absolute; TOP: 298px; HEIGHT: 98px;
BACKGROUND-COLOR: yellow; TEXT-ALIGN: left; padding-left:3">innerDIV</DIV>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Applies To

t:ANIMATECOLOR