HTA F/X

To use a filter, you must begin by setting the style.filter property to a specific predefined filter. In this case, the blendTrans filter is used. This filter accepts a duration parameter, which specifies how long the transition should occur. In this example, it's set to 7 seconds. After the filter is selected, you use the Apply method to prepare the SPAN element for content changes. However, the changes don't actually take place until the Play method executes.

The next line of code sets the style.visibility property to hidden, which means the Span1 object (which contains the existing text at this point) will fade out when the blendTrans .Play method executes in the following line. While in the hidden state, the text changes to the string specified by the innerText property.

To make the new text fade in, you apply the same techniques. After the filter is selected and prepared, you set the style.visibility property, but this time you set it to visible rather than hidden. When the Play method executes, the Span1 object (which contains the new text at this point) fades in. This transition also takes 7 seconds. The cursor is reset at the end of this transition because the onfilterchange event fires. Callout A in Listing 2 shows the code that resets the cursor by executing the resetcursor subprocedure. . . .