Working with Spry Effects

Spry Effects are visual enhancements that you can apply to almost any element on an HTML page. For example, an effect might highlight information, create animated transitions, or visually alter a page element for a certain period of time. Effects are a simple but elegant way of enhancing the look and feel of your website.

Note: Spry 1.5 brings many new features over the previous Spry Effects 1.4. These updates forced us to make some changes in the core code and the API. This may will cause some of the pages designed with a previous version of Spry Effects to not run correctly after updating to Spry 1.5. If you want to updated to Spry Effects 1.5, read the Spry Effects migration documentation and follow the steps described there to fix the compatibility problems.

Spry Effects basic overview

Effects refer to JavaScript methods and functions that run in the browser. Effects can be used to grow images in a gallery, or to move an element from one position to another.

For example, suppose there is the following content on the page:

<div id="content">
<img src="logo.jpg" width="150" height="350" alt="My Company">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus 
interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus 
vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, 
odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla 
tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum 
facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus 
sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus.


</div>

This content can be initially hidden when page loads while waiting for the images and other resources. In this situation you use CSS to hide this area:

<style type="text/css">
#content{
   visibility: hidden;
}
</style>

When the page finishes loading, you can setup the animation to display the content with a transition.

First, define a JavaScript Spry Effect animator below the main content area. For this example we will use a Fade in effect to make a gradual transition:

<script type="text/javascript">
	var showContent = new Spry.Effect.Fade("content", {from: "0%", to: "100%"});
</script>

In the above script, "content" is the ID of the element that will be faded in. 'From' and 'to' refer to the opacity of the element. 0% is invisible and 100% is fully visible.

To start the effect, a function is used. 'showContent' is the variable name used in the above code sample. The start() function will begin the effect.

<body onload="showContent.start();">
...

Note: The examples in this document are for reading purposes only and not intended for execution. For working samples, see the demos and samples folder in the Spry folder on Adobe Labs.

Spry Effects

Adobe designed Spry Effects to be easy to implement while letting the framework do the real work. No new tags or difficult syntaxes are required. The animated element will need to have an id attribute defined.

The Spry framework for AJAX includes these effects:

Fade
Makes an element appear or fade away.
Highlight
Changes the background color of an element.
Blind up/down
Simulates a window blind that moves up or down to hide or reveal the element.
Slide up/down
Moves the element up or down.
Grow
Increases or reduces the size of the element.
Shake
Simulates shaking the element from left to right.
Squish
Makes the element disappear into the upper-left corner of the page.

Each of the above effects are based on one or multiple of the following basic animators used together in a Cluster:

Move
Move an element from a position to another.
Size
Changes the size dimension of an element.
Opacity
Modify the opacity property of an element.
Color
Changes the background color of an element.

About the Spry effects library

The Spry Effects library, 'SpryEffects.js' , contains all of the Spry effects code. The file has no other dependencies.

Before you add effects to a page, link the SpryEffects.js file in the head of the HTML document, as follows:

<script type="text/javascript" src="../includes/SpryEffects.js"></script>
Note: The exact file path differs, depending on where you store the SpryEffects.js file.

Both the JavaScript file and the HTML file that contains the effects must reside on your server for Spry effects to work.

Before you begin

Prepare your files

Before you attach Spry effects to elements on your web pages, download and link the appropriate file.

  1. Locate the Spry ZIP file on the Adobe Labs website.
  2. Download and unzip the Spry ZIP file to your hard drive.
  3. Open the unzipped Spry folder and locate the 'includes' folder. This folder contains the file necessary for using Spry effects.
  4. Add the SpryEffects.js file to your website by doing one of the following: Note: If you drag the original includes folder or individual files out of the unzipped Spry folder, the demos and samples in the Spry folder won't work properly. Copy and paste to your website instead of dragging.
  5. When the SpryEffects.js file is part of your website, you are ready to link it and add Spry effects to your pages. For specific instructions on adding a particular effect to a page, see the individual effects sections.

Attach Effects

Highlight

The Highlight effect changes the background color of a target element.

You can attach the Highlight effect to any HTML element except applet, body, frame, frameset, or noframes.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document:
    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    Note: The exact file path differs differ, depending on where you store the SpryEffects.js file.
  2. Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect.
    <div id="highlight1"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
    
  3. To create the effect, add a JavaScript event that causes the effect when the user interacts with the page. For example, if you want the user to click on a sentence that causes another paragraph to highlight, you might add the following event to the sentence's p tag:
    <p><a onclick="highlight1.start(); return false;" href="#">Click here to highlight the below paragraph.</a></p>
    <script type="text/javascript">
    var highlight1 = new Spry.Effect.Highlight('highlight1', {duration: 1000, from:'#CCCCCC', to:'#FFCC33', restoreColor: '#FFCC33', toggle: true});
    </script>
    

    The first argument of the JavaScript method is always the target element's ID ('highlight1' in the preceding example).

    The complete code looks as follows:

    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    <body>
    <p><a onclick="highlight1.start(); return false;" href="#">Click here to highlight the below paragraph.</a></p>
    
    <div id="highlight1"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
    
    <script type="text/javascript">
    var highlight1 = new Spry.Effect.Highlight('highlight1', {duration: 1000, from:'#CCCCCC', to:'#FFCC33', restoreColor: '#FFCC33', toggle: true});
    </script>
    </body>

Highlight effect options

The following table lists the available options for the Highlight effect.

Option

Description

duration

The duration of the effect in milliseconds. The default value is 1000.

from

Start color value in RGB color format (#RRGGBB or #RGB). This value sets the color of the first frame of the highlight. The default is the background color of the target element.

to

End color value in RGB color format (#RRGGBB or #RGB). This value sets the color of the last frame of the highlight.

restoreColor

Color value in RGB color format (#RRGGBB or #RGB) to be restored at the end of animation in forward direction.

toggle

Produces a toggle effect. The default value is false. If the value is set to true, the restoreColor option is ignored.

transition

Determines the type of transition. The default is 'Spry.sinusoidalTransition'.

fps

Determines the number of frames per second of the animation. The default is 60.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

var effect = new Spry.Effect.Highlight("targetID", {duration:1000, from:"#00ff00", to:"#0000ff"});
effect.start();

More samples of the Highlight effect can be found in the effects samples folder from the Spry package.

Transitions

Most effects provide the optional parameter 'transition'. This parameter describes the transition of the effect while the effect is performing from start to stop. Values can be:

Fade

The Fade effect makes an element appear or fade away by modifing the element's opacity property.

You can attach the Fade effect to any HTML element except applet, body, iframe, object, tr, tbody, or th.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document:
    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.
  2. Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect.
    <div id="fade1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy .</div>
  3. To create the effect, add a JavaScript event that triggers the effect when the user interacts with the page. For example, if you want the user to click on a sentence that causes another paragraph to fade, you might add the following event to the sentence's p tag:
    <p><a onclick="fadeElement.start(); return false;" href="#">Click here to make the paragraph fade out from 100% to 20%.</a></p>
    <script type="text/javascript">
    var fadeElement = new Spry.Effect.Fade("fade1", {duration:1000, from:100, to:20, toggle:true});
    </script>

    The first argument of the JavaScript method is always the target element's ID ('fade1' in the preceding example).

    The complete code looks as follows:

    <head>
    . . . 
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    <body>
    <p><a onclick="fadeElement.start(); return false;" href="#">Click here to make the paragraph fade out from 100% to 20%.</a></p>
    
    <div id="fade1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</div>
    <script type="text/javascript">
    var fadeElement = new Spry.Effect.Fade("fade1", {duration:1000, from:100, to:20, toggle:true});
    </script>
    </body>
    

Fade effect options

The following table lists available options for the Fade effect.

Option

Description

duration

The duration of the effect in milliseconds. The default value is 1000.

from

Start opacity value in % ( "100%" ) or integer value. The default value is 0.

to

End opacity value in in % ( "100%" ) or integer value. The default value is 100.

toggle

Produces a toggle effect. The default value is false.

transition

Determines the type of transition. The default is 'Spry.fifthTransition'.

fps

Determines the number of frames per second of the animation. The default is 60.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

var effect = new Spry.Effect.Fade('targetID', {duration: 1000, from: 0, to: 100, toggle: true});
effect.start();

More samples of the Fade effect can be found in the effects samples folder.

Blind up/Blind down

The Blind up/Blind down effect simulates a window blind that moves up or down to hide or reveal the element. This effect is similar to the Slide effect, but the content stays in place.

You can only attach this effect to the following HTML elements: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu, or pre.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document:
    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.
  2. Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect.
    <div id="blindup1">
    	<h4>HEADER</h4>
    	<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed 
        	diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
    </div>
  3. To create the effect, add a JavaScript event that starts the effect when the user interacts with the page. For example, if you want the user to click on a sentence that causes another paragraph to blind up, you might add the following event to the sentence's p tag:
    <p><a onclick="blind_effect.start(); return false;" href="#">Click here to blind up from 100% to 0%</a></p>
    <script type="text/javascript">
    var blind_effect = new Spry.Effect.Blind("blindup1", {duration: 1000, from: "100%", to: "0%", toggle: true});
    </script>
    

    The first argument of the JavaScript method is always the target element's ID ('blindup1' in the preceding example).

    The complete code looks as follows:

    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </style>
    </head>
    <body>
    <p><a onclick="blind_effect.start(); return false;" href="#">Click here to blind up from 100% to 0%</a></p>
    <div id="blindup1">
    	<h4>HEADER</h4>
    	<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed 
        	diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
    </div>
    <script type="text/javascript">
    var blind_effect = new Spry.Effect.Blind("blindup1", {duration: 1000, from: "100%", to: "0%", toggle: true});
    </script>
    </body>

Blind up/Blind down effect options

The following table lists available options for the Blind effect.

Option

Description

duration

The duration of the effect in milliseconds. The default value is 1000.

from

Start size in %, integers or pixels. The default value is 100%.

to

End size in %, integers or pixels. The default value is 0%.

useCSSBox

The border, margin and padding should be modified proportionally with the element inner content box. Default value is false.

toggle

Produces a toggle effect. The default value is false.

transition

Determines the type of transition. The default is 'Spry.circleTransition'.

fps

Determines the number of frames per second of the animation. The default is 60.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

var effect = new Spry.Effect.Blind('targetID',{duration: 1000, from: "100%", to: "0%"});
effect.start();

More samples of Blind effect can be found in the effects samples folder from the Spry package.

Slide

The Slide effect moves the target element up or down (or left to right). This effect is similar to the Blind effect but the contents move up and down (or left to right) instead of staying in the same place.

You can only attach this effect to the following HTML elements: blockquote, dd, div, form, center, table, span, input, textarea, select, or image. The Slide effect require the content of the animated element to be wrapped into a single block element.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document:
    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.
  2. Make sure your target element is wrapped in a div that has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect.
    <div id="slide1">
    	<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed 
        	diam nonumy eirmod tempor invidunt ut labore et dolore magna 
        	aliquyam erat, sed diam voluptua.</div>
    </div>
  3. To create the effect, add a JavaScript event that causes the effect when the user interacts with the page. For example, if you want the user to click on a sentence that causes another paragraph to slide up, you might add the following event to the sentence's p tag:
    <p><a onclick="slide_effect.start(); return false;" href="#">Click here to slide the paragraph up from 100% to 20%</a></p>
    <script type="text/javascript">
    var slide_effect = new Spry.Effect.Slide("slide1", {duration:1000, from:'100%', to:'20%',toggle:true});
    </script>
    

    The first argument of the JavaScript method is always the target element's ID ('slide1' in the preceding example).

    The complete code looks as follows:

    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    <body>
    <p><a onclick="slide_effect.start(); return false;" href="#">Click here to slide the paragraph up from 100% to 20%</a></p>
    <div id="slide1">
    	<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed 
        	diam nonumy eirmod tempor invidunt ut labore et dolore magna 
        	aliquyam erat, sed diam voluptua.</div>
    </div>
    <script type="text/javascript">
    var slide_effect = new Spry.Effect.Slide("slide1", {duration:1000, from:'100%', to:'20%',toggle:true});
    </script>
    </body>

Slide effect options

The following table lists available options for the Slide effect.

Option

Description

duration

The duration of the effect in milliseconds. The default value is 1000.

from

Start size in %, interger or pixels. The default value is '100%'.

to

End size in % integer or pixels. The default value is '0%'.

toggle

Produces a toggle effect. The default value is false.

transition

Determines the type of transition. The default is 'Spry.sinusoidalTransition'.

fps

Determines the number of frames per second of the animation. The default is 60.

horizontal

If set to true, slides the content horizontally instead of vertically. The default value is false.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

var effect = new Spry.Effect.Slide("targetID", {duration: 1000, from: '100%', to: '0%'});
effect.start();

More samples of the Slide effect can be found in the effects samples folder from the Spry package.

Grow

The Grow effect increases or reduces the size of the element. The movement grows toward or away from the center of the element.

You can only attach this effect to the following HTML objects: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu, img or pre.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document:
    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.
  2. Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect:
    <div id="shrink1">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod .</p>
    </div>
  3. To create the effect, add a JavaScript event that starts the effect when the user interacts with the page. For example, if you want the user to click on a sentence that causes another paragraph to shrink, you might add the following event to the sentence's p tag:
    <p><a onclick="grow_effect.start(); return false;" href="#">Click here to shrink the paragraph from 100% to 20%.</a></p>
    <script type="text/javascript">
    var grow_effect = new Spry.Effect.Grow("shrink1", {duration:1000, from:"100%", to:"20%", toggle: true});
    </script>
    

    The first argument of the JavaScript method is always the target element's ID ('shrink1' in the preceding example).

    The complete code looks as follows:

    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    <body>
    <p><a onclick="grow_effect.start(); return false;" href="#">Click here to shrink the paragraph from 100% to 20%.</a></p>
    <div id="shrink1">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
    </div>
    <script type="text/javascript">
    var grow_effect = new Spry.Effect.Grow("shrink1", {duration:1000, from:"100%", to:"20%", toggle: true});
    </script> </body>

Grow effect options

The following table lists available options for the Grow effect.

Option

Description

duration

The duration of the effect in milliseconds. The default value is 1000.

from

Start size in %, integer or pixels. The default value is 0%.

to

End size in %, integer or pixels. The default value is 100%.

toggle

Produces a toggle effect. The default value is false.

growCenter

Growing and shrinking position of the element. The default value is true (grow and shrink from center). If set to false, the element grows or shrinks from the top left corner.

useCSSBox

The border, margin and padding should be modified proportionally with the element inner content box. Default value is false.

transition

Determines the type of transition. The default is 'Spry.squareTransition'.

fps

Determines the number of frames per second of the animation. The default is 60.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

var effect = new Spry.Effect.Grow("targetID", {duration: 1000, from: "0%", to: "100%"});
effect.start();

More samples of the Grow effect can be found in the effects samples folder from the Spry package.

Squish

The Squish effect makes the target element disappear into the upper-left corner of the page. The Squish effect produces the same effect as the Grow effect when the Grow effect's growCenter option is set to false.

You can only attach this effect to the following HTML elements: address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, or pre.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document:
    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.
  2. Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect.
    <div id="squish1"><p>Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
    labore et dolore magna aliqt</p></div>
  3. To create the effect, add a JavaScript event that starts the effect when the user interacts with the page. For example, if you want the user to click on a sentence that causes another paragraph to squish, you might add the following event to the sentence's p tag:
    <p><a onclick="squish_effect.start(); return false;" href="#">Click here to squish the paragraph.</a></p>
    <script type="text/javascript">
    var squish_effect = new Spry.Effect.Squish("squish1");
    </script>
    

    The first argument of the JavaScript method is always the target element's ID ('squish1' in the preceding example).

    The complete code looks as follows:

    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    <body>
    <p><a onclick="squish_effect.start(); return false;" href="#">Click here to squish the paragraph.</a></p>
    
    <div id="squish1"><p>Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
    labore et dolore magna aliqt</p></div>
    
    <script type="text/javascript">
    var squish_effect = new Spry.Effect.Squish("squish1");
    </script>
    </body> 

Squish effect options

The following table lists optional available options:

Option

Description

duration

The duration of the effect in milliseconds. The default value is 1000.

from

Start size in %, integer or pixels. The default value is 0%.

to

End size in %, integer or pixels. The default value is 100%.

toggle

Produces a toggle effect. The default value is false.

useCSSBox

The border, margin and padding should be modified proportionally with the element inner content box. Default value is false.

transition

Determines the type of transition. The default is 'Spry.squareTransition'.

fps

Determines the number of frames per second of the animation. The default is 60.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

var effect = new Spry.Effect.Squish("targetID",{duration: 1000, from: "100%", to: "0%"});
effect.start();

More samples of the Squish effect can be found in the effects samples folder from the Spry package.

Shake

The Shake effect simulates rapidly shaking the target element 20 pixels from left to right.

You can only attach this effect to the following HTML elements: address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre, or table.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document:
    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.
  2. Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect.
    <div id="shake1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqit amet.</div>
  3. To create the effect, add a JavaScript event that starts the effect when the user interacts with the page. For example, if you want the user to click on a sentence that causes another paragraph to shake, you might add the following event to the sentence's p tag:
    <p><a onclick="shake_effect.start(); return false;" href="#">Shake it!</a></p>
    <script type="text/javascript">
    	var shake_effect = new Spry.Effect.Shake('shake1');
    </script>

    The first argument of the JavaScript method is always the target element's ID ('shake1' in the preceding example).

    The complete code looks as follows:

    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    <body>
    <p><a onclick="shake_effect.start(); return false;" href="#">Shake it!</a></p>
    <div id="shake1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
    <script type="text/javascript">
    	var shake_effect = new Spry.Effect.Shake('shake1');
    </script>
    </body> 

Shake effect options

The following table lists available options for the Shake effect.

Option

Description

duration

Fixed at 500 milliseconds in Spry 1.4. Only editable in Spry 1.5 and later.

transition

Determines the type of transition. The default is 'Spry.linearTransition'.

fps

Determines the number of frames per second of the animation. The default is 60.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

var effect Spry.Effect.Shake('targetID');
effect.start();

More samples of the Shake effect can be found in the effects samples folder from the Spry package.

Cluster Effects overview

The Spry Effects Cluster is the way of combining multiple effects to run together on a single element. Depending on the method the animators are added to a Cluster class, the effects can either run in parallel or in queue (an effect is started only when the previous effect ended).

When you define a cluster, you can combine simple Animators like Move, Size, Opacity or Color, or a previous predefined Cluster effect. Using this ability you can create a new cluster effect as a combination of the current defined effects above described. Two good examples can be found in the Spry Effects Demo. There are two new clustered effects defined inside this demo: Fade & Slide and Fade & Blind.

A Cluster can contain an unlimited number of effects to animate. There is no restriction the clustered effects on the same element in a page. You can animate two or more different elements using a cluster, either in parallel or one after the other.

All the predefined effects Fade, Grow, Highlight, Slide, Shake and Blind, listed above, are clustered effects of the basic Animators: Move, Size, Opacity or Color.

Create a Cluster

  1. Extend the Spry Cluster JavaScript class

    The Spry Effects includes a class called Spry.Effect.Cluster. Any new effect that extends this class will became a Cluster.

    To link the SpryEffects.js file on your web page, add the following code to the head of your document:
    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.

    Suppose you we want to create a new effect that will fade in or out in parallel with sliding an element.

    Let's create our class to extend the Spry.Effect.Cluster. The constructor should receive two parameters: the element to animate and the animation options.

    <script type="text/javascript">
    FadeSlide = function(element, options)
    {
    	Spry.Effect.Cluster.call(this, options);
    };
    FadeSlide.prototype = new Spry.Effect.Cluster();
    FadeSlide.prototype.constructor = FadeSlide;
    </script>
    

    We will have to define first some default values for the options we would like to support which will define the Effect behavior when no options are used:

    <script type="text/javascript">
    FadeSlide = function(element, options)
    {
    	Spry.Effect.Cluster.call(this, options);
    	var duration = 1000;
    	var from = 0;
    	var to = 100;
    	var transition = Spry.fifthTransition;
    	var toogle = false;
    };
    FadeSlide.prototype = new Spry.Effect.Cluster();
    FadeSlide.prototype.constructor = FadeSlide;
    </script>
    

    These default options should be replaced with the values received as parameters.

    <script type="text/javascript">
    FadeSlide = function(element, options)
    {
    	Spry.Effect.Cluster.call(this, options);
    	var duration = 1000;
    	var from = 0;
    	var to = 100;
    	var transition = Spry.fifthTransition;
    	var toggle = false;
    	if (options)
    	{
    		if (options.duration != null) duration = options.duration;
    		if (options.from != null) from = options.from;
    		if (options.to != null) to = options.to;
    		if (options.transition != null) transition = options.transition;
    		if (options.toggle != null) toggle = options.toggle;
    	}
    };
    FadeSlide.prototype = new Spry.Effect.Cluster();
    FadeSlide.prototype.constructor = FadeSlide;
    </script>
    

    The next step will be to define the effects that will effectivelly run and animate our given element

    <script type="text/javascript">
    FadeSlide = function(element, options)
    {
    	Spry.Effect.Cluster.call(this, options);
    	var duration = 1000;
    	var from = 0;
    	var to = 100;
    	var transition = Spry.fifthTransition;
    	if (options)
    	{
    		if (options.duration != null) duration = options.duration;
    		if (options.from != null) from = options.from;
    		if (options.to != null) to = options.to;
    		if (options.transition != null) transition = options.transition;
    	}
    	var fadeEffect = new Spry.Effect.Fade(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
    	var blindEffect = new Spry.Effect.Blind(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
    };
    FadeSlide.prototype = new Spry.Effect.Cluster();
    FadeSlide.prototype.constructor = FadeSlide;
    </script>
    

    Note: In this situation, the options sent to the individual effect are the same. There are situation when the values for the defined effects need a more complex computation for each effect participating into the cluster.

    After the effects are defined , as a last step, should be register to the cluster. The registration is done using one of the the two methods that are made available by the original Cluster class from Spry Effects: addParallelEffect and addNextEffect. Using the first method of registering the effects to the cluster will cause all the effects registered to run in parallel. Below is the complete code of the FadeSlide with the two animations registered in parallel:

    <script type="text/javascript">
    FadeSlide = function(element, options)
    {
    	Spry.Effect.Cluster.call(this, options);
    	var duration = 1000;
    	var from = 0;
    	var to = 100;
    	var transition = Spry.fifthTransition;
    	if (options)
    	{
    		if (options.duration != null) duration = options.duration;
    		if (options.from != null) from = options.from;
    		if (options.to != null) to = options.to;
    		if (options.transition != null) transition = options.transition;
    	}
    	var fadeEffect = new Spry.Effect.Fade(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
    	var blindEffect = new Spry.Effect.Blind(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
    	this.addParallelEffect(fadeEffect);
    	this.addParallelEffect(blindEffect);
    };
    FadeSlide.prototype = new Spry.Effect.Cluster();
    FadeSlide.prototype.constructor = FadeSlide;
    </script>
    

    The only thing that remains is to use the new effect you just created, same as any other effect.

    <p><a onclick="myFadeSlide.start(); return false;" href="#">Click here to Fade and Blind the below paragraph.</a></p>
    
    <div id="content">Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
    ut labore et dolore magna aliqit amet.</div>
    
    <script type="text/javascript">
    var myFadeSlide = new FadeSlide("content", {from: "100%", to: "0%", duration: 1500, toogle: true}
    </script>

Transition overview

The mathematical algorithms inside the Spry Effects used to compute the path between a starting value and the end value are called 'transition' algorithms.

A transition function will have a different impact on each effect's smoothness and perception. An effect may look nice using a certain transition while using the same algorithm with another effect may have a different perception. For instance, a boucing transition is good for moving panels, but might not be right for changing colors.

When you want to move from a point of origin to an ending point, the simplest and shortest path is a linear transition. The transitions are time dependent functions. This means that a transition will always take the same amount of time. Therefore, a transition will go faster if it has to go farther, growing for instance.

The transition functions will return the current position of the value at any given time between the starting and the ending desired values.

All the effects in Spry framework are designed to receive as parameter the transition to use. There are 8 transitions function included in Spry that you can use depending on your need.

The actual transitions are hard to describe. The Spry 'samples' folder includes a transition sample so you can see how the tranistions work with the effects. The graph gives a visual representation of the transition.

Extending transitions

The current transition mechanism allows you to define your own transition functions and use them with Effects. Depending on the mathematical algorithm used, you have control over the animation acceleration and deceleration periods from the animation.

In your page you'll have to define a new function that receive the following parameters: elapsed time (time), starting value (begin), the difference between the finish and the start values (change) and the total time duration of the effect (duration).

<script type="text/javascript">
function myTransition(time, begin, change, duration)
{ /* ... */}
</script>

The value the function returns should be the current value for the time elapsed from the moment the transition started.

The new transition function can be now used with any of the effects. You will have to pass as the value the name of your transition function.

Sample code:

myTransition = function(time, begin, change, duration){
	if (time > duration) return (change+finish);
	return begin + Math.sqrt(time/duration) * change;
}
var effect = new Spry.Effect.Fade("targetID", {duration: 1000, transition: myTransition, toggle: true, from: 100, to: 0});
effect.start();

Attach a Color effect

The Color effect makes the transition of the target element background from a color to another. This effect is used by the Highlight Cluster effect for animation.

You can attach the Color effect to any HTML element except applet, body, frame, frameset, or noframes.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document:
    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.
  2. Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect.
    <div id="color1"><p>Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
    labore et dolore magna aliqt</p></div>
  3. To create the effect, add a JavaScript event that starts the effect when the user interacts with the page. For example, if you want the user to click on a sentence that causes another paragraph to change color you might add the following event to the sentence's p tag:
    <p><a onclick="color_effect.start(); return false;" href="#">Click here to change the background color of the paragraph.</a></p>
    <script type="text/javascript">
    var color_effect = new Spry.Effect.Color("color1", "#FFCC33", "#CC5512", {duration: 1000});
    </script>
    

    The first argument of the JavaScript method is always the target element's ID ('color1' in the preceding example).

    The second argument required is the start color of the background in RGB format.

    The third argument is the ending color of the background in RGB format.

    The complete code looks as follows:

    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    <body>
    <p><a onclick="color_effect.start(); return false;" href="#">Click here to change the background color of the paragraph.</a></p>
    
    <div id="color1"><p>Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
    labore et dolore magna aliqt</p></div>
    
    <script type="text/javascript">
    var color_effect = new Spry.Effect.Color("color1", "#FFCC33", "#CC5512", {duration: 1000});
    </script>
    </body> 

Color effect options

The following table lists optional available options:

Option

Description

duration

The duration of the effect in milliseconds. The default value is 1000.

toggle

Produces a toggle effect. The default value is false.

transition

Determines the type of transition. The default is 'Spry.linearTransition'.

fps

Determines the number of frames per second of the animation. The default is 60.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

var effect = new Spry.Effect.Color("targetID", "#FFCC33", "#CC5512", {duration: 1000, transition: Spry.fifthTransition, toggle: true}););
effect.start();

Move

The Move effect change the target element position within the page. The Move effect is used by many of the clustered effects: Grow, Slide, Shake, Squish.

You can only attach this effect to the following HTML elements: address, dd, div, dl, dt, form, img, ol, ul, applet, center, dir, menu, or pre.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document:
    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.
  2. Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect.
    <div id="move1"><p>Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
    labore et dolore magna aliqt</p></div>
  3. To create the effect, add a JavaScript event that causes the effect when the user interacts with the page. For example, if you want the user to click on a sentence that causes another paragraph to change the dimentions, you might add the following event to the sentence's p tag:
    <p><a onclick="move_effect.start(); return false;" href="#">Click here to move the paragraph.</a></p>
    <script type="text/javascript">
    var fromPos = new Spry.Effect.Utils.Position();
    fromPos.x = 0;
    fromPos.y = 0;
    
    var toPos = new Spry.Effect.Utils.Position();
    toPos.x = 300;
    toPos.y = 0;
    
    Spry.Effect.makePositioned(document.getElementById("move1"));
    var move_effect = new Spry.Effect.Move("move1", fromPos, toPos, {duration: 1000, toggle: true});
    </script>
    

    The first argument of the JavaScript method is the target element's ID ('move1' in the preceding example).

    The second argument the position that represent the start coordinates of the element. The default units of mesure are pixels. You can change this value by using the 'units' property of the position object: fromRect.units = 'em';

    The third argument the position that represent the ending coordinates of the element. The default units of mesure are pixels. You can change this value by using the 'units' property of the position object: fromRect.units = 'em';

    Note: the units for both starting and ending positions should be the same otherwise the effect will not accept them as valid parameters.

    You can observe in the code above the following line:

    Spry.Effect.makePositioned(document.getElementById("move1"));

    The animated element should have the position CSS property set to absolute or relative. The code line above is making sure the element position property is correct for the Move animation to work.

    The complete code looks as follows:

    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    <body>
    <p><a onclick="move_effect.start(); return false;" href="#">Click here to move the paragraph.</a></p>
    
    <div id="move1"><p>Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
    labore et dolore magna aliqt</p></div>
    
    <script type="text/javascript">
    var fromPos = new Spry.Effect.Utils.Position();
    fromPos.x = 0;
    fromPos.y = 0;
    
    var toPos = new Spry.Effect.Utils.Position();
    toPos.x = 300;
    toPos.y = 0;
    
    Spry.Effect.makePositioned(document.getElementById("move1"));
    var move_effect = new Spry.Effect.Move("move1", fromPos, toPos, {duration: 1000, toggle: true});
    </script>
    </body> 

Size effect options

The following table lists optional available options:

Option

Description

duration

The duration of the effect in milliseconds. The default value is 1000.

toggle

Produces a toggle effect. The default value is false.

transition

Determines the type of transition. The default is 'Spry.linearTransition'.

fps

Determines the number of frames per second of the animation. The default is 60.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

var fromRect = new Spry.Effect.Utils.Rectangle;
fromRect.width = 100;
fromRect.height = 100;

var toRect = new Spry.Effect.Utils.Rectangle;
toRect.width = 300;
toRect.height = 300;

Spry.Effect.makeClipping(document.getElementById("targetID"));
var size_effect = new Spry.Effect.Size("targetID", fromRect, toRect, {duration: 1000, toggle: true, scaleContent: true, transition: Spry.fifthTransition});

Opacity

The Opacity effect makes the target element disappear or appear by changing the CSS opacity property. The Opacity effect is used by the Fade Cluster effect.

You can attach the Fade effect to any HTML element except applet, body, iframe, object, tr, tbody, or th.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document:
    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.
  2. Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect.
    <div id="opacity1"><p>Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
    labore et dolore magna aliqt</p></div>
  3. To create the effect, add a JavaScript event that starts the effect when the user interacts with the page. For example, if you want the user to click on a sentence that causes another paragraph dissapear by changing the opacity, you might add the following event to the sentence's p tag:
    <p><a onclick="opacity_effect.start(); return false;" href="#">Click here to hide the paragraph.</a></p>
    <script type="text/javascript">
    var opacity_effect = new Spry.Effect.Opacity("opacity1", 1, 0.1, {duration: 1000});
    </script>
    

    The first argument of the JavaScript method is always the target element's ID ('opacity1' in the preceding example).

    The second and the third arguments are the start and end opacity values. These values should be float numbers between 0 and 1 where 0 make the element to be invisible and 1 is the value for the element opac.

    The complete code looks as follows:

    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    <body>
    <p><a onclick="opacity_effect.start(); return false;" href="#">Click here to hide the paragraph.</a></p>
    
    <div id="opacity1"><p>Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
    labore et dolore magna aliqt</p></div>
    
    <script type="text/javascript">
    var opacity_effect = new Spry.Effect.Opacity("opacity1", 1, 0.1, {duration: 1000});
    </script>
    </body>

Opacity effect options

The following table lists optional available options:

Option

Description

duration

The duration of the effect in milliseconds. The default value is 1000.

toggle

Produces a toggle effect. The default value is false.

transition

Determines the type of transition. The default is 'Spry.linearTransition'.

fps

Determines the number of frames per second of the animation. The default is 60.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

var effect = new Spry.Effect.Opacity("targetID", 1, 0.5, {duration: 1000, toggle: true});
effect.start();

Size

The Size effect change the target element width and height. The Size effect is used by many of the clustered effects: Grow, Blind, Slide

You can only attach this effect to the following HTML elements: address, dd, div, dl, dt, form, img, ol, ul, applet, center, dir, menu, or pre.

  1. To link the SpryEffects.js file on your web page, add the following code to the head of your document:
    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    Note: The exact file path differs, depending on where you store the SpryEffects.js file.
  2. Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect.
    <div id="size1"><p>Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
    labore et dolore magna aliqt</p></div>
  3. To create the effect, add a JavaScript event that starts the effect when the user interacts with the page. For example, if you want the user to click on a sentence that causes another paragraph to change the dimentions, you might add the following event to the sentence's p tag:
    <p><a onclick="size_effect.start(); return false;" href="#">Click here to resize the paragraph.</a></p>
    <script type="text/javascript">
    var fromRect = new Spry.Effect.Utils.Rectangle;
    fromRect.width = 100;
    fromRect.height = 300;
    
    var toRect = new Spry.Effect.Utils.Rectangle;
    toRect.width = 300;
    toRect.height = 900;
    
    Spry.Effect.makeClipping(document.getElementById("size1"));
    var size_effect = new Spry.Effect.Size("size1", fromRect, toRect, {duration: 1000, toggle: true});
    </script>
    

    The first argument of the JavaScript method is the target element's ID ('size1' in the preceding example).

    The second argument is a rectangle that represent the start dimensions of the element. The default units of mesure are pixels. You can change this value by using the 'units' property of the rectangle: fromRect.units = 'em';

    The third argument is a rectangle that represent the ending dimensions of the element. The default units of mesure are pixels. You can change this value by using the 'units' property of the rectangle: fromRect.units = 'em';

    Note: the units for both starting and ending rectangles should be the same otherwise the effect will not accept them as valid parameters.

    You can observe in the code above the following line:

    Spry.Effect.makeClipping(document.getElementById("size1"));

    The animated element should have the CSS overflow property set to hidden or scroll. When shrinking the element dimentions, we do not want the content to be displayed outside the inner content area. The code line above is making sure the element overflow property is correct for the Size animation to work.

    The complete code looks as follows:

    <head>
    . . .
    <script src="../includes/SpryEffects.js" type="text/javascript"></script>
    </head>
    <body>
    <p><a onclick="size_effect.start(); return false;" href="#">Click here to resize the paragraph.</a></p>
    
    <div id="size1"><p>Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
    labore et dolore magna aliqt</p></div>
    
    <script type="text/javascript">
    var fromRect = new Spry.Effect.Utils.Rectangle;
    fromRect.width = 100;
    fromRect.height = 300;
    
    var toRect = new Spry.Effect.Utils.Rectangle;
    toRect.width = 300;
    toRect.height = 900;
    
    Spry.Effect.makeClipping(document.getElementById("size1"));
    var size_effect = new Spry.Effect.Size("size1", fromRect, toRect, {duration: 1000, toggle: true});
    </script>
    </body> 

Size effect options

The following table lists optional available options:

Option

Description

duration

The duration of the effect in milliseconds. The default value is 1000.

scaleContent

The content of the element is scaled proportionally with the dimensions animation. The default value is false.

toggle

Produces a toggle effect. The default value is false.

useCSSBox

The border, margin and padding should be modified proportionally with the element inner content box. Default value is false.

transition

Determines the type of transition. The default is 'Spry.linearTransition'.

fps

Determines the number of frames per second of the animation. The default is 60.

setup

Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}.

finish

Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}.

Sample code:

var fromRect = new Spry.Effect.Utils.Rectangle;
fromRect.width = 100;
fromRect.height = 100;

var toRect = new Spry.Effect.Utils.Rectangle;
toRect.width = 300;
toRect.height = 300;

Spry.Effect.makeClipping(document.getElementById("targetID"));
var size_effect = new Spry.Effect.Size("targetID", fromRect, toRect, {duration: 1000, toggle: true, scaleContent: true, transition: Spry.fifthTransition});

Observers

Observer notifications overview

The Effects supports an observer mechanism that allows an object or callback function to receive event notifications. Using this system you can implement your own custom functions or objects to register to any effect. Everytime the effect will pass through some predefined execution points the observers will executed.

Using this mechanism you can synchronize other actions with the running effect.

Notification

Description

onPreEffect

The effect is about to start the element animation.

onStep

The animation executed a new animation step. The code you execute here should not be time consuming otherwise you'll affect the animation smoothness that wait at each step for your code to finish.

onPostEffect

The animation finished all the steps and will stop.

onCancel

The effect was canceled and the animation will stop.

onToggle

The animation is about to start in the backward direction. This notification will be fired only if the toggle option is on.

Note:The onPostEffect and onCancel observers will be notified just before effect to end execution. If in these functions you'll like to restart the effect, for example, to run in the backward direction, or you need to change some of the options in the effect, you should use the setTimeout() JS function to postpone your action just after the effect finish. Not using this system is possible the effect to stop your effect run command or to restore the old properties.

Objects as observers

To receive notifications, an object must define a method for each notification it is interested in receiving, and then register itself as an observer on the Effect. The registration to the effect should be done after the effect is instantiated but before the effect to be started. For example, an object interested in onPostEffect notifications must define an onPostEffect() method. Calling the addObserver() method of the instantiated effect you register then the new created observer to the effect.

A single observer object can contain multiple methods for each action to be notified. However, if the observer don't need to be notified on certain events than it can ignore them by not implementing their corresponding functions.

var effect = new Spry.Effect.Blind("myElement", {from: '100%', to: '0%', toggle: true});

var myObserver = new Object();
myObserver.onPreEffect = function(eff)
{
	alert('onPreEffect called! The effect is running in '+(eff.direction == Spry.forwards?'forward':'backward')+' direction');
};
myObserver.onStep = function(eff)
{
	alert('onStep called!');
};
effect.addObserver(myObserver);

effect.start();

The first argument for each notification method is the object that is sending the notification. For the effects observers, this is always the effect object.

To stop an object from receiving notifications, the object must be removed from the list of observers with a call to removeObserver().

var effect = new Spry.Effect.Blind("myElement", {from: '100%', to: '0%', toggle: true});
...
effect.removeObserver(myObserver);

More samples of the Observers can be found in the effects samples folder from the Spry package.

Functions as observers

Functions can also be registered as observers. The main difference between object and function observers is that an object is only notified for the notification methods it defines, whereas a function observer is called for every type of event notification.

var effect = new Spry.Effect.Blind("myElement", {from: '100%', to: '0%', toggle: true});

function myObserverFunc(notificationType, eff)
{
	if (notificationType == 'onPreEffect'){
		alert('onPreEffect called !');
	}else if (notificationType == 'onStep'){
		alert('onStep called !');
	}
};

A function observer is registered with the same call to addObserver.

When the function is called, the first argument to be passed into it is the notification type. This is a string that is the name of the notification. The second argument is the notifier, which in this case is the effect.

To stop a function from receiving notifications, the function must be removed from the list of observers with a call to removeObserver().

var effect = new Spry.Effect.Blind("myElement", {from: '100%', to: '0%', toggle: true});
...
effect.removeObserver(myObserverFunc);

More samples of the Observers can be found in the effects samples folder from the Spry package.

Copyright © 2006. Adobe Systems Incorporated.
All rights reserved.