Spry effects are visual enhancements that you can apply to almost any element on an HTML page using JavaScript. Effects are often used to highlight information, create animated transitions, or alter a page element visually for a duration of time. You can apply effects to HTML elements without needing additional custom tags. Effects can alter an element's opacity, scale, position, and styling properties such as background color. You can create interesting visual effects by combining two or more properties. Because these effects are Spry-based, when a user clicks an object with an effect, only the object is dynamically updated.
Play the simulation: Adding Spry Effects
In order for the Ajax behviors to be implemented on the images and div below, each image and/or div needs an ID. Enter the ID in the property inspector for each image and complete the steps below. Save the homework as homework one, upload it to your web server, and link to it from your index page. When applying the behavior, make sure to select "Toggle Effect" for each of the behaviors. I have made one example (Blind) live.