by property
Sets or gets a relative offset value for an animation.
Syntax
| JScript |
|---|
|
Property values
Type: Variant
the relative value used to animate an element attribute over time. This is a delta value used to offset the underlying value of the attribute. This value can include the following length unit designators: px, in, cm, mm, pt, or pc. For more information about the supported length units, see the CSS Length Units Reference.
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, you can use the from property to specify a starting value for the animation.
The by property is only valid for attribute values that support addition.
When you write 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.by='150';
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 path property overrides any setting for the values property, the from property, the to property, or the by property.
- 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.
The following script shows how to change an active animation from a path value to a by value.
<SCRIPT>
object.endElement();
object.path=null;
object.by='150';
object.beginElement();
</SCRIPT>
Examples
The following example shows how to use the by property to specify the offset of an animation.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/by.htm
<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<?IMPORT namespace="t" implementation="#default#time2">
<STYLE>
.time{ behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY>
<t:ANIMATE AUTOREVERSE="true" targetElement="div1" attributeName="left"
from="100" dur="5" by="200" fill="hold"/>
<DIV id="div1" class="time"
style="position:absolute; top:170; background-color:#003399;color:#FFCC00">
Moving DIV</DIV>
</BODY>
</HTML>