Share via


end property

Sets or gets a value indicating the end time for the element, or the end of the simple duration when the element is set to repeat.

Syntax

JScript
object.end = sTimesTime = object.end

 

Property values

Type: String

one of the following values.

Remarks

The END attribute represents an absolute value along the parent element timeline, starting at zero seconds. In contrast, the DUR attribute represents a value relative to the value of the BEGIN attribute on the element. Do not use the END attribute on the same element as the DUR attribute.

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

When you use an element associated with the time behavior, instead of the time2 behavior, you must prefix the attribute with the t: namespace. The time behavior only supports the clock-value format and the indefinite value.

In Microsoft Internet Explorer 6, The end property applies to the transitionFilter.

Examples

This example uses the END attribute to display three lines of text, each with its own start time, but all with the same end time.

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

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
    .time{ behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY BGCOLOR="white">
<SPAN CLASS=time STYLE="COLOR:Red;" BEGIN="0" END="10"
    TIMEACTION="visibility">
    <H3>Paragraph 1</H3>
    <P>This is paragraph number one. It is displayed as soon as
    the page is loaded.</P>
</SPAN>
<SPAN CLASS=time STYLE="COLOR:Blue;" BEGIN="3" END="10"
    TIMEACTION="visibility">
    <H3>Paragraph 2</H3>
    <P>This is paragraph number two. It is displayed three seconds
    after the page is loaded.</P>
</SPAN>
<SPAN CLASS=time STYLE="COLOR:Green;" BEGIN="6" END="10"
    TIMEACTION="visibility">
    <H3>Paragraph 3</H3>
    <P>This is paragraph number three. It is displayed six seconds
    after the page is loaded.</P>
</SPAN>
</BODY>
</HTML>

This example uses the END attribute to make a paragraph disappear when the user clicks the button.

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

<HTML>
<HEAD>
<STYLE>
    .time2 {behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY BGCOLOR="white">
<BUTTON ID="button1">Hide Paragraph</BUTTON><BR><BR>
<SPAN ID="span1" CLASS="time2" STYLE="COLOR:Red;"
    END="button1.click" TIMEACTION="display">
    <H3>Paragraph 1</H3>
    <P>This is paragraph number one. It disappears when the button 
    is clicked.</P>
</SPAN>
</BODY>
</HTML>

This example uses the END attribute to modify the effect of a transition.

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

            
<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 TYPE="fade" DUR="8" END="4" TARGETELEMENT="firstDiv"/>
<DIV CLASS="time" ID="firstDiv" 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>

This example shows how to use multiple values for the END attribute to specify that a time element can end on the timeline for several different reasons.

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

<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
  <STYLE>
    .time    {behavior: url(#default#time2);}
    #oDiv
    {
    border:2px solid black;
    font:12pt arial;  
    padding:20;
    color:#000000;
    background-color:#FFCC00;
    width:270px;
    height:270px;
    }
  </STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time" 
implementation = "#default#time2" />
</HEAD>
<BODY ID="oBody">

<BUTTON ID="oButton">Click</BUTTON>
<t:PAR ID="oPar" BEGIN="oButton.click">
<!-- This DIV ends on the time line either after 8 seconds, one second after the body 
of the document is clicked, or one second after the mouse cursor leaves the DIV. -->
<DIV ID="oDiv" BEGIN="1" CLASS="time" END="8;oBody.click+1;oPar.mouseleave+1">
<!-- These TRANSITIONFILTER elements are just here to create the visible transitions -->
<t:TRANSITIONFILTER BEGIN="oDiv.begin" DUR="1" MODE="in" TYPE="fade"/>
<t:TRANSITIONFILTER BEGIN="oDiv.End-1;" DUR="1" MODE="out" TYPE="pushWipe"/>
This is the contents of the DIV
</DIV>

</t:PAR>

</BODY>
</HTML>

See also

animate

animateColor

animateMotion

animation

audio

img

media

ref

seq

set

time2

video

transitionFilter

Reference

endElement

endElementAt

Conceptual

Introduction to HTML+TIME