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.

Effects refer to JavaScript methods and functions that reside on the client, and don't require any server-side logic or scripting to work. Thus, when a user browses an HTML page and triggers an effect, only the object to which the effect is applied is updated: you do not need to refresh the entire page.

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

Simulates a window blind that moves up or down to hide or reveal the element.

Slide

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 preceding effects is based on one or more of the following basic effects, which you can also use to create effect clusters:

Move

Moves an element from one position to another.

Size

Changes the size of an element.

Opacity

Modifies the opacity of an element.

Color

Changes the background color of an element.

Adobe designed Spry effects to be easy to implement on the page while letting the framework do the real work. No new tags or complicated syntaxes are required. The HTML element to which you apply the effect does not require any custom tags.