jQuery 1.4 Animation Techniques - Index of

[ 147 ]
Chapter 6
What just happened?
When a Delete link is clicked, our handler function first sets the background-color of
the that the link is within. This is not mandatory for the effect, but it does help bring
it to life.
We then apply the pulsate effect to all elements within the row using the effect()
method. We need to apply the effect to the elements instead of the element so
that the effect works as intended in IE.
When the effect ends, our inline callback function will be executed which removes the .
Obviously the can only be removed once, but once it has been removed, subsequent
attempts to remove it will just fail silently.
The shake effect
The shake effect shakes the element that it is applied to back and forth a specified number
of times.
Configuration options
The shake effect exposes three configuration options that allow us to customize its behavior.
These are listed in the following table:
Option Default Usage
direction "left" Sets the direction that the element moves in
distance 20 Sets the number of pixels the element travels when
it is shaken
times 3 Sets the number of times the element shakes
Time for action – shaking an element
The open source .Net CMS Umbraco uses the shake effect when incorrect login details are
entered in the sign-in form for its back-office administration area. In this example we can see
how easy it is to implement this behavior using the shake effect.
1. Add the following markup to the template file as the basis of the log in form:
Login
Username:
Password:
Login