jQuery in Action
146
CHAPTER 5
Sprucing up with animations and effects
We create custom animations by supplying a set of
CSS
style properties and target
values that those properties will converge towards as the animation progresses.
Animations start with an element's original style value and proceed by adjusting
that style value in the direction of the target value. The intermediate values that
the style achieves during the effect (automatically handled by the animation
engine) are determined by the duration of the animation and the easing function.
Animations start with an element's original style value and proceed by adjusting
that style value in the direction of the target value. The intermediate values that
the style achieves during the effect (automatically handled by the animation
engine) are determined by the duration of the animation and the easing function.
The specified target values can be absolute values, or we can specify relative val-
ues from the starting point. To specify relative values, prefix the value with
+=
or
-=
to indicate relative target values in the positive or negative direction, respectively.
Command syntax: animate
animate(properties,duration,easing,callback)
animate(properties,options)
Applies an animation, as specified by the properties and easing parameters, to all mem-
bers of the wrapped set. An optional callback function can be specified that's invoked when
the animation is complete. An alternate format specifies a set of options in addition to the
properties
bers of the wrapped set. An optional callback function can be specified that's invoked when
the animation is complete. An alternate format specifies a set of options in addition to the
properties
.
Parameters
properties
(Object) An object hash that specifies the end values that supported CSS
styles should reach at the end of the animation. The animation takes place
by adjusting the values of the style properties from the current value for an
element to the value specified in this object hash.
styles should reach at the end of the animation. The animation takes place
by adjusting the values of the style properties from the current value for an
element to the value specified in this object hash.
duration
(Number|String) Optionally specifies the duration of the effect as a number
of milliseconds or as one of the predefined strings: slow, normal, or fast. If
omitted, no animation takes place.
of milliseconds or as one of the predefined strings: slow, normal, or fast. If
omitted, no animation takes place.
easing
(String) The optional name of a function to perform easing of the anima-
tion. Easing functions must be registered by name and are often provided
by plugins. Core jQuery supplies two easing functions registered as linear
and swing.
tion. Easing functions must be registered by name and are often provided
by plugins. Core jQuery supplies two easing functions registered as linear
and swing.
callback
(Function) An optional function invoked when the animation completes. No
parameters are passed to this function, but the function context (this) is
set to the element that was animated.
parameters are passed to this function, but the function context (this) is
set to the element that was animated.
options
(Object) Specifies the animation parameter values using an object hash.
The supported properties are as follow:
The supported properties are as follow:
duration
--See previous description of duration parameter.
easing
--See previous description of easing parameter.
complete
--Function invoked when the animation completes.
queue
--If false, the animation isn't queued and begins running
immediately.
Returns
The wrapped set.
The wrapped set.