jQuery 1.4 Animation Techniques - Index of

[ 149 ]
Chapter 6
In the previous screenshot, we see the text fields being shaken when they are left empty and
the is clicked.
What just happened?
When the is clicked we simply check to see if each has a value and
if not, we apply a red border and then call the effect() method specifying shake as the
effect. We use a configuration object to reduce the distance the element moves, as well as
specifying a relatively short duration.
The size effect
The size effect is used to resize an element, making it grow or shrink depending on its
configuration. Unlike most of the other effects, the size effect must be configured for it
to be used successfully.
The size effect is also one of the only effects that has the base core file as well as another
effect as dependencies. Most components rely only on the core file. As we downloaded
the entire effect suite from the jQuery UI download builder, we don't need to worry about
including the additional effect. It's already in the single file that the download builder
created when we downloaded it at the start of the chapter.
Configuration options
The size effect gives us four configurable options, which are listed as follows:
Option Default Usage
from none Sets the size of the target element at the beginning of the
animation. This option accepts an object with height and
width keys which are used to set the starting size of the target
element. This option is not mandatory.
to none Sets the size of the target element at the end of the animation.
This option accepts an object with height and width keys
which are used to set the ending size of the target element. This
option must be supplied.
origin ['middle ',
'center']
Sets the vanishing point for hiding animations, or the point from
which it grows when used with show logic.
scale "both " This option sets whether the whole box of the element
(including border and padding CSS values) is scaled, just the
content, or as in the default, both.