BY Attribute | by Property (t:ANIMATECOLOR)

HTML (DHTML)

previous page next page

BY Attribute | by Property

Sets or retrieves a relative offset value by which to animate a color attribute or property with the t:ANIMATECOLOR element.

Syntax

HTML <t:ANIMATECOLOR BY = vValue... >
Scripting t:ANIMATECOLOR.by(val) [ = vValue ]

HTML	<t:ANIMATECOLOR BY = vValue... >
Scripting	t:ANIMATECOLOR.by(val) [ = vValue ]

Possible Values

vValue Variant that specifies or receives the relative value used to animate an element's color properties. This is a delta value used to offset the underlying value of the attribute or property.
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. However, specifying a starting value for the animation using the from property is optional.
The by property is only valid for attribute values that support addition. 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.
During the course of an animation, you can change the target element's color attribute by offsetting its value with the value specified for the by property. This offset value is actually the sum of the target element's color value and the by property's value. Note that if you choose to specify a starting value for the animation's target attribute by setting the from property, the end value of the target attribute will instead be the sum of the values set for the from and by properties.
If the by property is set without also setting the from property, the animation is defined to be additive and will override the additive property.
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.by='150';
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 an t:ANIMATECOLOR element to animate the backgroundColor of a DIV element. The inner DIV element's backgroundColor is set to #808000 (olive).
The outerDIV's backgroundColor is initially set to #FF7F50 (coral). Over the course of the a1 t:ANIMATECOLOR element's duration, this value is offset by #808000 (olive), the value of the inner DIV element's backgroundColor. Since the by attribute is additive, outerDIV's backgroundColor is calculated over the duration of the animation as the progressive sum of #FF7F50 (coral) and #808000 (olive). Thus, outerDIV ends the animation with a yellow hue of #FFFF50.
<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" dur="15" fill="hold">
<t:ANIMATECOLOR id="a1" targetElement="outerDIV"
attributeName="background-color" by="#808000" begin="1" dur="3"
fill="hold"/>
</t:PAR>
<DIV id="outerDIV" class="time" style="FONT-SIZE: 18; LEFT: 58px; WIDTH: 279px;
POSITION: absolute; TOP: 190px; HEIGHT: 217px; BACKGROUND-COLOR: #ff7f50;
TEXT-ALIGN: left; border:1px solid black; padding-left:3">outerDIV</DIV>
<DIV id="innerDIV" class="time" style="FONT-SIZE: 18; LEFT: 102px;
WIDTH: 188px; POSITION: absolute; TOP: 248px; HEIGHT: 98px;
BACKGROUND-COLOR: #808000; TEXT-ALIGN: left; padding-left:3;
border:1px solid black;">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