Attach a Shake effect

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.

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.

The SpryEffects.js file is in the includes folder of the Spry folder that you downloaded from Adobe Labs. See Prepare your files.

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>

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 shake, you might add the following event to the sentence’s p tag:

<p><a onclick="Spry.Effect.DoShake('shake1'); return false;" href="#">Shake it!</a></p>

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="Spry.Effect.DoShake('shake1'); return false;" href="#">Shake it!</a></p>
<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>
</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.
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:

Spry.Effect.DoShake('targetID');

Current page: http://livedocs.adobe.com/en_US/Spry/1.4/WSE756B98C-097C-44ae-A5A8-131FE0A2C442.html

Spry

Attach a Shake effect

Shake effect options

Comments