filter - Barn() (Filter/transition)

A transition effect with the appearance of barn doors opening or closing.

Availability:

JScript - 5.5
Internet Explorer - 5.5
Object properties:Duration, Enabled, Motion, Orientation, Percent, status
Object methods:apply(), play(), stop()

The Duration property controls the time it takes to playback the transition effect.

The Enabled property provides a way to activate or inhibit the filter from working by assigning the true or false value to it.

The Motion property can use the values in or out to determine the direction that the transition moves in.

The Orientation property indicates whether the effect is applied horizontally or vertically with the values horizontal or vertical.

The Percent property controls the point at which the effect can be halted to provide a static effect. The value can be between 0 and 100.

The status value can be read to determine the current disposition of the transition filter. It will return one of three values. The 0 value indicates the transition has stopped, 1 indicates that it is completed and 2 that it is still in progress.

The apply() method sets the transition effect to its initial condition.

The play() method executes the transition effect using the control values and taking the time specified in the duration value. You can override the duration property by passing an optional duration argument to this method when it is called.

The stop() method can be called at any time during the time the transition is running to halt the transition playback. This will also trigger the execution of an onFilterChange event handler if there is one defined.

The example shows the filter being applied in a continuous time-out loop.

Example code:

   <HTML>
   <HEAD>
   </HEAD>
   <BODY onLoad="switchState()">
   <DIV ID="CONTAINER" STYLE="position:absolute; top: 0; left: 0; width: 300; height:300;  filter:progid:DXImageTransform.Microsoft.Barn(orientation=vertical, motion=out) ">
   <DIV ID="DIV1" STYLE="position:absolute; top:50; left:10; width:240; height:180;background:ivory">
   <BR>
   <BR>
   <BR>
   <HR>
   <CENTER>
   This is a DIV block containing text.
   </CENTER>
   <HR>
   </DIV>
   <DIV ID="DIV2" STYLE="visibility:hidden; position:absolute; top:50; left:10; width:240; height:180; background:antiquewhite; ">
   <CENTER>
   <BR>
   <IMG SRC="./Logo150.gif">
   </CENTER>
   </DIV>
   </DIV>
   <SCRIPT>
   DIV1.style.visibility = "visible";
   function switchState()
   {
      CONTAINER.filters[0].Apply();
      if (DIV1.style.visibility == "visible")
      {
         DIV1.style.visibility = "hidden";
         DIV2.style.visibility = "visible";
      }
      else
      {
         DIV1.style.visibility = "visible";
         DIV2.style.visibility = "hidden";
      }
      CONTAINER.filters[0].Play();
      setTimeout("switchState()", 2000);
   }
   </SCRIPT>
   </BODY>
   </HTML>

See also:filter - Iris(), filter - RandomBars(), Filter object, style.filter

PropertyJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
Duration n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
Enabled n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
Motion n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
Orientation n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
Percent n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
status n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-

MethodJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
apply() n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
play() n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
stop() n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-