A Spry effect has three components:

• The effect JavaScript object itself (not visible)

• An element on the page that triggers the effect

• An element on the page that the effect manipulates

Following is the HTML code for a basic Fade effect:

<form method="get" action="fade_sample.html">
<input type="button" onclick="myFadeEffect.start();" value="Fade Example" />
</form>
<div class="demoDiv" id="fadeblock">
	<h4>Fade example</h4>
	<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed 
    diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    aliquyam erat, sed diam voluptua.</p>
</div>
<script type="text/javascript">
	var myFadeEffect = new Spry.Effect.Fade('fadeblock', {toggle:true});
</script>

In the preceding example, the script block at the end of the HTML code creates the Fade effect object. The start() method triggers the effect when a user clicks the button, and once the effect is triggered, the div content with the “fadeblock” ID fades away. Additionally, the toggle option is added to this effects constructor, so that if a user clicks the button again, the paragraph fades back into view.

In the example, the first value in the constructor (fadeblock) is the ID of the div container that holds the text that you want to fade. These two values must match.

The name of the variable (myFadeEffect) can be anything; you must also match it when you use it in the code that triggers the effect. You trigger the effect by attaching a behavior (such as an on-click behavior) to a page element (like a button). The behavior uses the start() method to trigger the effect, and the syntax of the method is variableName.start() .