jQuery in Action
Animating the display state of elements
141
Other than the lack of scaling, these commands work in a fashion similar to
show()
and
hide()
(when animated) respectively. The syntaxes of these commands
are as follow:
Let's have some more fun with the jQuery Effects Lab Page. Display the lab, and
run through a set of exercises similar to those we followed in the previous section
run through a set of exercises similar to those we followed in the previous section
Command syntax: fadeIn
fadeIn(speed,callback)
Causes any matched elements that are hidden to be shown by gradually changing their opac-
ity to their natural value. This value is either the opacity originally applied to the element, or
100%. The duration of the change in opacity is determined by the speed parameter. Any ele-
ments that aren't hidden aren't affected.
ity to their natural value. This value is either the opacity originally applied to the element, or
100%. The duration of the change in opacity is determined by the speed parameter. Any ele-
ments that aren't hidden aren't affected.
Parameters
speed
(Number|String) Specifies the duration of the effect as a number of millisec-
onds or as one of the predefined strings: slow, normal, or fast. If omitted, the
default is normal.
onds or as one of the predefined strings: slow, normal, or fast. If omitted, the
default is normal.
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.
Returns
The wrapped set.
The wrapped set.
Command syntax: fadeOut
fadeOut(speed,callback)
Causes any matched elements that aren't hidden to be removed from the display by gradu-
ally changing their opacity to 0% and then removing the element from the display. The dura-
tion of the change in opacity is determined by the speed parameter. Any elements that are
already hidden aren't affected.
ally changing their opacity to 0% and then removing the element from the display. The dura-
tion of the change in opacity is determined by the speed parameter. Any elements that are
already hidden aren't affected.
Parameters
speed
(Number|String) Specifies the duration of the effect as a number of millisec-
onds or as one of the predefined strings: slow, normal, or fast. If omitted, the
default is normal.
onds or as one of the predefined strings: slow, normal, or fast. If omitted, the
default is normal.
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.
Returns
The wrapped set.
The wrapped set.