Migrate effects from Spry 1.4 to Spry 1.5

With Spry 1.5, you can now add observers to effects much as you do for data sets and regions, and you can simultaneously combine multiple effects like Slide, Squish, and Highlight to create effects clusters.

The new implementation provides a redesign of the current effects classes. Static animation functions are transformed into classes that inherit the notification mechanism and the existing cluster interface. As an added benefit, Spry 1.5 includes some known effects bug fixes, like reverting the order of running subeffects inside a cluster when toggling.

If you are using effects created with Spry 1.4, and want to upgrade your effects to work with Spry 1.5, you need to make a few changes to your code. The most significant change from Spry 1.4 to Spry 1.5 is the change from static effects functions to classes, which requires you to change the way you call the effects. The code looks familiar if you’ve already used Spry widgets.

In Spry 1.4 and earlier, you attached an effect to an element's onclick event, as follows:

<a href="#" onclick="Spry.Effect.Slide('element', {toggle:true});">Click to animate</a>
<div id="element">I'm the animated div</div>

If you replace your 1.4 version of the SpryEffects.js file with the 1.5 version, your page animation will not work when you click the element. For the effect to work properly, you must migrate your code by transforming the functions to classes (the preferred method for migrating effects), or by using wrapper functions.

Transform functions to classes

Extract the effect’s code from its current HTML tag and place it inside a script tag below the element that you want to animate.

<a href="#" onclick="">Click to animate</a>
<div id="element">I'm the animated div</div>
..
<script type="text/javascript">
	Spry.Effect.Slide('element', {toggle:true});
</script>

Add the new operator in front of the JavaScript line, and give the resulting object a variable name, as follows:

<a href="#" onclick="">Click to animate</a>
<div id="element">I'm the animated div</div>
<script type="text/javascript">
    var slide_effect = new Spry.Effect.Slide('element', {toggle:true});
</script>

The variable name can be anything, and is used to control the effect.

After you’ve created the effect object and saved it in a variable, integrate the effect back into the original trigger element, so that the user can interact with it. To do this, call the start() method. The start() method triggers the effect, and uses the variable name that you specified in the constructor script.
```
<a href="#" onclick="slide_effect.start();">Click to animate</a>
<div id="element">I'm the animated div.</div>
<script type="text/javascript">
    var slide_effect = new Spry.Effect.Slide('element', {toggle:true});
</script>
```

You might need to rename an effect. The following table shows name changes for three effects in Spry 1.5.

Spry 1.4 effect name	Spry 1.5 effect name
AppearFade	Fade
GrowShrink	Grow
MoveSlide	Slide

If you are using one of the preceding effects, change its name in the JavaScript. For example, Spry.Effect.AppearFade changes to Spry.Effect.Fade.

Note: The MoveSlide effect was removed from the available effects list in Spry 1.5, and its code was subsumed into the Slide effect.

Use wrapper functions

The Spry 1.5 effects library also includes a list of wrapper functions for easy migration. If you want to continue using an effect as a function as you did in Spry 1.4, you’ll need to rename the function.

Enable these functions by amending the function name slightly with the word “Do.” For example,

<a href="#" onclick="Spry.Effect.AppearFade('element', {toggle:true});">Click to animate</a><div id="element">I'm the animated div</div>

becomes

<a href="#" onclick="Spry.Effect.DoFade('element', {toggle:true});">Click to animate</a><div id="element">I'm the animated div</div>

The following table provides a list of function name changes.

Original function name	New function name
Spry.Effect.AppearFade()	Spry.Effect.DoFade()
Spry.Effect.Highlight()	Spry.Effect.DoHighlight()
Spry.Effect.GrowShrink()	Spry.Effect.DoGrow()
Spry.Effect.Shake()	Spry.Effect.DoShake()
Spry.Effect.Squish()	Spry.Effect.DoSquish()
Spry.Effect.Blind()	Spry.Effect.DoBlind()
Spry.Effect.Slide()	Spry.Effect.DoSlide()

Note: The wrapper-function names are based on the new names in the Spry 1.5 effects library.