jQuery in Action
Animating the display state of elements
143
Exercise 1--Select Fade To and a speed value slow enough for you to observe
the behavior; 4000 milliseconds is a good choice. Now set the Fade to Opac-
ity field (which expects a percentage value between 0 and 100, converted to
0.0 through 1.0 when passed to the command) to
the behavior; 4000 milliseconds is a good choice. Now set the Fade to Opac-
ity field (which expects a percentage value between 0 and 100, converted to
0.0 through 1.0 when passed to the command) to
10
, and click Apply. The
test subjects will fade to 10 percent opacity over the course of four seconds.
Exercise 2--Set the opacity to
100
, and click Apply. All elements, including
the initially semi-transparent image, are adjusted to full opaqueness.
Exercise 3--Set the opacity to
0
, and click Apply. All elements fade away to
invisibility, but note that once they've vanished, the enclosing fieldset does
not tighten up. Unlike the
not tighten up. Unlike the
fadeOut()
effect,
fadeTo()
never removes the
element from the display, even when it's fully invisible.
Continue experimenting with the Fade To effect until you've mastered its work-
ings. Then we'll be ready to move on to the next set of effects.
ings. Then we'll be ready to move on to the next set of effects.
5.2.3 Sliding elements up and down
Another set of effects that hide or show elements--
slideDown()
and
slideUp()
--
also works in a similar manner to the
hide()
and
show()
effects, except that the
elements appear to slide down from their tops when being revealed and to slide
up into their tops when being hidden.
up into their tops when being hidden.
As with
hide()
and
show()
, the slide effects have a command that will toggle
the elements between hidden and revealed:
slideToggle()
. The by-now-familiar
syntaxes for these commands follow below.
Command syntax: slideDown
slideDown(speed,callback)
Causes any matched elements that are hidden to be shown by gradually increasing their ver-
tical size. Any elements that aren't hidden aren't affected.
tical size. Any elements 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.