begin property

Sets or gets the delay time before the timeline begins playing on the element.

Syntax

JScript
object.begin = sTimesTime = object.begin

 

Property values

Type: String

one or more of the following values.

Remarks

The begin property exposed by the time2 behavior includes functionality that was previously provided by the beginAfter property and the beginWith property in the time behavior.

The BEGIN attribute can be assigned many BEGIN time values. For example, to make the element begin 12 seconds after element x receives focus, specify BEGIN="x.onfocus+12s". To make the element begin 10 seconds before element x begins, specify BEGIN="x.end-10s". If you want an element to begin four seconds after the page loads or to begin one second after the user clicks an object on the page, use the following syntax: BEGIN="4; oObject.click+1".

You can set the begin property relative to an event by using the syntax begin="element.onevent" or begin="element.event". Both are valid.

For child elements of excl time containers, the default value is indefinite.

In Microsoft Internet Explorer 6, the begin property applies to the transitionFilter element.

Examples

This example uses the BEGIN attribute to make text appear and disappear over time.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/begin.htm

<HTML>
<HEAD>
<STYLE>
    .time{ behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY BGCOLOR="white">
<SPAN CLASS=time STYLE="COLOR:Red;" BEGIN="0" DUR="3"
    TIMEACTION="display">
    <H3>Paragraph #1</H3>
    <P>This is paragraph number one. It appears for three seconds immediately 
    after the page is loaded.</P>
</SPAN>
<SPAN CLASS=time STYLE="COLOR:Blue;" BEGIN="4" DUR="4" 
    TIMEACTION="display">
    <H3>Paragraph 2</H3>
    <P>This is paragraph number two. It appears one second after the first
    paragraph disappears, and remains displayed for four seconds.</P> 
</SPAN>
<H1 CLASS=time BEGIN="8" DUR="indefinite" TIMEACTION="display">
    The End.
</H1>
</BODY>
</HTML>

This example shows how to create timeline dependencies by specifying an event value for the BEGIN attribute.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/beginevent.htm

<HTML>
<HEAD>
<STYLE>
.time{ behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY BGCOLOR="white">
<P>Click the following button to display a paragraph two seconds later. 
The paragraph displays for five seconds.</P><BR><BR>
<BUTTON ID="button1">Show Paragraph</BUTTON><BR><BR>
<SPAN ID="span1" CLASS=time STYLE="COLOR:Red;"
    BEGIN="button1.click+2" DUR="5" TIMEACTION="display">
    <H3>Paragraph 1</H3>
    <P>This is paragraph number one. It appears two seconds after 
    the button is clicked and displays for five seconds.</P>
</SPAN>
</BODY>
</HTML>

See also

animate

animateColor

animateMotion

animation

audio

img

media

ref

seq

set

time2

video

transitionFilter

Reference

end

Conceptual

Introduction to HTML+TIME