JavaScript Kit > IE Filters reference > Transitions > Here
GradientWipe Transition (filter)
The GradientWipe Transition reveals new content by applying a gradient band
over the original content. Defined via IE's CSS filter property and applied through JavaScript, here is its basic
syntax:
Syntax:
filter :progid:DXImageTransform.Microsoft.GradientWipe(attribute1=value1, attribute2=value2, etc);
Syntax (post IE8):
-ms-filter: "progid:DXImageTransform.Microsoft.GradientWipe(attribute1=value1, attribute2=value2, etc)";
Note: See "Difference in syntax between pre IE8 and IE8+ browsers" for more info on the changes to the filter syntax in IE8+.
Example:
<style type="text/css">
#somediv{
width: 90%;
-ms-filter:
"progid:DXImageTransform.Microsoft.GradientWipe(duration=5)";
filter
:progid:DXImageTransform.Microsoft.GradientWipe(duration=5);
}
</style>
<div id="somediv">Some
DIV</div>
Syntax Via Scripting
//To define a new GradientWipe filter on
an element
object.style.filter ="progid:DXImageTransform.Microsoft.GradientWipe(attribute=value1,
attribute2=value2)"
To access an existing property within the GradientWipe filter:
object.filters.item("DXImageTransform.Microsoft.GradientWipe").Property1=value1;
//To access an existing property within the GradientWipe filter via the
filters[] object
object.filters[x].Property1=value1 //where "x" is
the position of the filter within list of filters on element
Below lists the attributes/properties of the GradientWipe Transition:
GradientWipe Transition attributes (properties)
| Attributes/ Properties | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| duration | Sets the duration of time the transition takes to
complete, in seconds. No default value. Valid values: Floating point number greater than 0 (seconds implied, ie: 2.5 means 2.5 seconds) |
||||||||
| enabled | Sets/ returns whether the filter is enabled or not. Valid values: true/ false |
||||||||
| gradientSize | Sets the percentage of the content that
is covered by the gradient band. Default is 0.25 (25%). Valid values: 0 - 1 (multiplied by 100 to derive percentage value) |
||||||||
| motion | Sets the direction of the transition
effect relative to the wipeStyle property below.. Default is
forward. When property is set to "reverse", the
direction of the transition is the reverse of that specified in the
property wipeStyle. Valid values (string): "forward" or "reverse". Example: <style type="text/css"> |
||||||||
|
Percent * This property accessible via scripting only |
Sets the point in which to capture the display of the content to apply the
transition on. Default is 0. Valid values: 0 - 100 (percentage implied) |
||||||||
|
status * This property accessible via scripting only |
Returns the current state of the transition. Valid values:
Example: <script type="text/javascript"> |
||||||||
|
WipeStyle * This property accessible via scripting only |
Sets whether the gradient band moves
vertically or horizontally. Default value is 0 (left to right). Valid values: 0 or 1 (left/right or top/down). |
GradientWipe Transition methods
| Methods | Description |
|---|---|
| apply() | Captures the initial display of the content in
preparation for the transition to be played (using the play()
method). No visible changes to the content made at this point. |
| play([duration]) | Plays the transition in question. Supports an
optional duration parameter that, if set, overrides the
value of the duration property above in specifying the duration of
the transition (in seconds).Example: <style type="text/css"> |
| stop() | Stops the transition playback. |
GradientWipe Transition Demo
Beautiful castle for sale.
Source:
<style type="text/css">
#sample{
-ms-filter:
"progid:DXImageTransform.Microsoft.GradientWipe(duration=3)";
filter
:progid:DXImageTransform.Microsoft.GradientWipe(duration=3);
width: 230px;
height: 230px;
background-color: black;
padding: 10px;
color: white;
}
</style>
<div id="sample">
<img src="castle.jpg" /><br />
<b>Beautiful castle for sale.</b>
</div>
<p><a href="javascript:playtransition()">Play Transition</a></p>
<script type="text/javascript">
var sample=document.getElementById("sample")
function playtransition(){
sample.innerHTML='<img src="castle.jpg" /><br /><b>Beautiful castle for
sale.</b>' //reset DIV to original content (in case demo is run more than once).
sample.filters[0].apply() //capture initial state of image (showing
"castle.gif")
sample.innerHTML='<img src="castleinside.jpg" /><br /><b>Interior is elegant yet
modern!</b>'
sample.filters[0].play() //play transition to reveal new image and description
}
</script>