filter - GradientWipe() (Filter/transition)

A transition effect with the appearance of a wipe with a soft edge.

Availability:

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

This transition effect supports the following properties:

The following methods are supported by this transition filter:

The example runs in a continuous loop. Note that you should ensure the loop is at least long enough to cope with the effect duration otherwise a jerky transition will result.

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.GradientWipe(duration=5, gradientsize=0.4, motion=forward, wipestyle=0) ">
   <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()", 7000);
   }
   </SCRIPT>
   </BODY>
   </HTML>

See also: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/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
GradientSize n/a5.5 5.5 n/a5.5 5.5 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-
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-
WipeStyle 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-