Overview | : | Highlight | : | Fade | : | Grow | : | Squish | : | Shake | : | Blind | : | Slide |
An detailed overview of the functions inside the SpryEffects.js and how to call them
The Blind Effect enables users simulating a window blind up/down, where the contents of the affected elements stay in place.
<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>
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 |
address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu, pre
varname.start(); - Starts the effect.
varname.stop(); - Stops the effect.
Makes an element appear/fade away
<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>
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 |
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]
applet, body, iframe, object, tr, tbody, th
varname.start(); - Starts the effect.
varname.stop(); - Stops the effect.
Shrinks or Grows the specified element.
<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>
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 |
address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre
varname.start(); - Starts the effect.
varname.stop(); - Stops the effect
This effect Flashes a color as the background of an element.
<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>
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 |
If you use the toggle option within the highlight effect , the restoreColor get ignored.
applet, body, frame, frameset, noframes
varname.start(); - Starts the effect.
varname.stop(); - Stops the effect
The Shake effect moves the specified element left and right in a rapid manner.
<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>
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){} |
Shake only works left and right. It does not work up and down. The duration is fixed to 500ms.
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
varname.start(); - Starts the effect.
varname.stop(); - Stops the effect.
Simulates a window blind, where the contents of the specified element scrolls up or down or from left to right.
<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>
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 |
Slide effect always requires a single <div> around the content that should slide. The widget is attached to the outer container.
blockquote, dd, form, div, center
varname.start(); - Starts the effect.
varname.stop(); - Stops the effect.
The Squish effect collapses the specified element into the upper left corner of itself until it disappears.
<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>
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){} |
address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre
varname.start(); - Starts the effect.
varname.stop(); - Stops the effect.
The Pulsate effect causes the element to quickly fade in and out during the duration.
<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>
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 |
address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre
varname.start(); - Starts the effect.
varname.stop(); - Stops the effect.
The Puff effect causes the element to move towards the top left corner of the screen and fade out at the same time..
<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>
address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre
varname.start(); - Starts the effect.
varname.stop(); - Stops the effect.
The Fold effect causes the element to disappear by blinding up and then to the left.
<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>
address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre
varname.start(); - Starts the effect.
varname.stop(); - Stops the effect.
The Fold effect causes the element to move down the page as it fades out.
<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>
address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre
varname.start(); - Starts the effect.
varname.stop(); - Stops the effect.
Copyright © 2006. Adobe Systems Incorporated. All rights reserved.