# Spry Effects API

Overview | : | Highlight | : | Fade | : | Grow | : | Squish | : | Shake | : | Blind | : | Slide

#### Links

An detailed overview of the functions inside the SpryEffects.js and how to call them

#### Samples

- All effects combined in on page (Adobe Products Demo)
- Several Effect combined on one page
- Demonstrates the Grow/Shrink effect on images, also uses the setup & finish callback function to set the z-index style property

### Blind

The Blind Effect enables users simulating a window blind up/down, where the contents of the affected elements stay in place.

View Example

     <a href="#" onclick="theSlide.start();" >
        Blind Up with toggle=true </a>
    <div id="slideItUp1">
      <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
        diam nonumy eirmod tempor invidunt ut labore et dolore magna
    	</p>
    </div>
    <script>
    var theSlide = new Spry.Effect.Blind('slideItUp1', {duration: 1000, from:  '100%', to:  '0%', toggle: true});
    </script>

#### Parameters for the Blind effect

duration | The duration of the effect in milliseconds
from | The start value of the effect as string value + % or px. e.g from:"10px"
to | The end value of the effect as string value + % or px.
toggle | If the effect should run in revers orde onc you select the trigger element again
setup | function that is called before the effect begins e.g function setup (element,effect){}
finish | function that is called after the effect e.g function finish (element,effect){ alert("finish function")}
transition | Spry.linearTransition or Spry.sinusoidalTransition as object

#### Allowed elements

address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu, pre

#### Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

### Fade

Makes an element appear/fade away

View Example

     <a href="#" onclick="fadeIt.start();">Fade It</a>
       <div id="targetID">Fade me, please.</div>
       <script>
       var fadeIt = new Spry.Effect.Fade('targetID',{duration: 1000,from: 0, to: 100,toggle: true, setup:setupFunc,finish:finishFunc});
     function setupFunc(elmentObj , FadeObj)
       {
       alert('The ' + FadeObj.name +' effect now starts');
       }
      function finishFunc(elmentObj , FadeObj)
       {
       elmentObj.style.backgroundColor= "#ff0000"; // set the element background color to red
       }
       </script>

#### Parameter for the Appear Fade effect

duration | The duration of the effect in milliseconds
from | The start value of the effect as integer value from:10
to | The end value of the effect as integer value
toggle | If the effect should run in revers orde onc you select the trigger element again
setup | function that is called before the effect begins e.g function setup (element,effect){}
finish | function that is called after the effect e.g function finish (element,effect){}
transition | Spry.linearTransition or Spry.sinusoidalTransition as object

#### Notes

Works safely with most HTML elements, except body, table rows, table bodies and table heads.
There is currently no common way to set the opacity of an element either use opacity:0.2 or filter:alpha(opacity=20)
for IE.
The opacity is also not supported by [Firefox 1.5, Microsoft IE for Macintosh 5.2, Microsoft Internet Explorer 6.0, Netscape Navigator 8.0, Opera 8.0, Safari 2.0]

#### Non supported Elements

applet, body, iframe, object, tr, tbody, th

#### Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

### Grow

Shrinks or Grows the specified element.

View Example

    <a href="#" onclick="theGrow.start();" > Shrink from 100%  to 20%  with toggle=true</a>
    <div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
        diam nonumy eirmod tempor invidunt ut labore et dolore magna</div>
    <script>
    var theGrow = new Spry.Effect.Grow('example1',{duration:700, from:'100%', to:'20%',toggle:true,transition:Spry.linearTransition});
    </script>

#### Parameter for the Grow/Shrink effect

duration | The duration of the effect in milliseconds
from | The start value of the effect as string value + % or px. e.g from:"10px"
to | The end value of the effect as string value + % or px.
referHeight | reference direction for the from/to parameters, if set in pixel (true: height, false: width), default: false
growCenter | growing position of the element (true: grow from center, false: grow from top left corner), default: true
toggle | If the effect should run in revers order onc you select the trigger element again
setup | function that is called before the effect begins e.g function setup (element,effect){}
finish | function that is called after the effect e.g function finish (element,effect){}
transition | Spry.linearTransition or Spry.sinusoidalTransition as a object

#### Allowed elements

address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre

#### Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect

top

### Highlight

This effect Flashes a color as the background of an element.

View Example

    <a href="#" onclick="thehighlight.start();" > Highlight Box  </a></p>
    <div id="highlight1">Lorem ipsum dolor sit amet,consetetur sadipscing elitr</div>
    <script>
    var thehighlight = new Spry.Effect.Highlight('highlight1',{duration:  2000,from:'#CCCCCC',to:'#FFCC33',restoreColor:'#FFCC33',toggle:true});
    </script>

#### Parameters for the Highlight effect

duration | The duration of the effect in milliseconds
from | startcolor value, sets the color of first frame of the highlight
toggle | true or false, if true the restoreColor get ignored
to | endcolor value, sets the color of the last frame of the highlight.
restoreColor | Sets the background color of the element after the highlight has finished.
setup | function that is called before the effect begins e.g function setup (element,effect){}
finish | function that is called after the effect e.g function finish (element,effect){}
transition | Spry.linearTransition or Spry.sinusoidalTransition as a object

#### Notes

If you use the toggle option within the highlight effect , the restoreColor get ignored.

### Elements not allowed

applet, body, frame, frameset, noframes

#### Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect

top

### Shake

The Shake effect moves the specified element left and right in a rapid manner.

View Example

    <a href="#" onclick="theShake.start();"> Shake it </a></p>
    <div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
        diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqit amet</div>
    <script>
    var theShake = new Spry.Effect.Shake('example1');
    </script>

#### Parameters for the Shake effect

id | id of the element to be shaken.
duration | the length of the shaking. Default is 500 millliseconds.
setup | function that is called before the effect begins e.g function setup (element,effect){}
finish | function that is called after the effect e.g function finish (element,effect){}

#### Notes

Shake only works left and right. It does not work up and down. The duration is fixed to 500ms.

#### Allowed 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, table

#### Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

### Slide

Simulates a window blind, where the contents of the specified element scrolls up or down or from left to right.

View Example

    <a href="#" onclick="theSlide.start();" > Slide Up with toggle=true</a>
     <div id="example1">
      <div>	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
        diam nonumy eirmod tempor invidunt ut labore et dolore magna
    </div>
     </div>
    <script>
    var theSlide = new Spry.Effect.Slide('example1',{duration:1000,from:'100%', to:'20%',toggle:true});
    </script>

#### Parameter for the Slide effect

duration | The duration of the effect in milliseconds
from | The start value of the effect as string value + % or px. e.g from:"10px"
to | The end value of the effect as string value + % or px.
horizontal | The slide direction of the effect (true: horizontal or false: vertical (default))
toggle | If the effect should run in revers orde onc you select the trigger element again
setup | function that is called before the effect begins e.g function setup (element,effect){}
finish | function that is called after the effect e.g function finish (element,effect){}
transition | Spry.linearTransition or Spry.sinusoidalTransition as a object

#### Notes

Slide effect always requires a single <div> around the content that should slide. The widget is attached to the outer container.

#### Allowed elements

blockquote, dd, form, div, center

#### Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

### Squish

The Squish effect collapses the specified element into the upper left corner of itself until it disappears.

View Example

    <a href="#" onclick="theSquish.start();" > Squish Example 2 </a>
    <div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</div>
    <script>
    var theSquish = new Spry.Effect.Squish('example1');
    </script>

#### Parameters for the Squish effect

duration | The duration of the effect in milliseconds
toggle | If the effect should run in revers order once you select the trigger element again
setup | function that is called before the effect begins e.g function setup (element,effect){}
finish | function that is called after the effect e.g function finish (element,effect){}

#### Allowed elements

address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre

#### Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

### Pulsate

The Pulsate effect causes the element to quickly fade in and out during the duration.

View Example

    <a href="#" onclick="thePulse.start();" >Pulsate Example</a>
    <div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</div>
    <script>
    var thePulse = new Spry.Effect.Pulsate('example1');
    </script>

#### Parameters for the Pulse effect

duration | The duration of the effect in milliseconds
from | The start value of the effect as string value + % or px. e.g from:"10px"
to | The end value of the effect as string value + % or px.
transition | Spry.linearTransition or Spry.sinusoidalTransition as a object

#### Allowed elements

address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre

#### Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

### Puff

The Puff effect causes the element to move towards the top left corner of the screen and fade out at the same time..

View Example

    <a href="#" onclick="thePuff.start();" >Puff Example</a>
    <div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</div>
    <script>
    var thePuff = new Spry.Effect.Puff('example1');
    </script>

#### Parameters for the Pulse effect

Values for this effect are hard coded in SpryEffects.js

#### Allowed elements

address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre

#### Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

### Fold

The Fold effect causes the element to disappear by blinding up and then to the left.

View Example

    <a href="#" onclick="theFold.start();" >Fold Example</a>
    <div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</div>
    <script>
    var theFold = new Spry.Effect.Fold('example1',{toggle:true});
    </script>

#### Parameters for the Pulse effect

Values for this effect are hard coded in SpryEffects.js

#### Allowed elements

address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre

#### Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

### Dropout

The Fold effect causes the element to move down the page as it fades out.

View Example

    <a href="#" onclick="theDropOut.start();" >Dropout Example</a>
    <div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</div>
    <script>
    var theDropOut = new Spry.Effect.DropOut('example1',{toggle:true});
    </script>

#### Parameters for the Pulse effect

Values for this effect are hard coded in SpryEffects.js

#### Allowed elements

address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre

#### Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

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