jQuery in Action
140
CHAPTER 5
Sprucing up with animations and effects
NOTE
When we say that an element has been removed from the display (here, and in
the remainder of our discussion about effects), we mean that the element
is no longer being taken into account by the browser's layout manager, just
as if its
the remainder of our discussion about effects), we mean that the element
is no longer being taken into account by the browser's layout manager, just
as if its
CSS
display
style property value has been set to
none
. It does not
mean that the element has been removed from the
DOM
tree; none of the
effects will ever cause an element to be removed from the
DOM
.
Exercise 3--Next, select the Toggle radio button, and click Apply. Click
Apply again. And again. You'll note that each subsequent execution of
Apply again. And again. You'll note that each subsequent execution of
toggle()
flips the presence of the test subjects.
Exercise 4--Reload the page to reset everything to the initial conditions (in
Firefox, set focus to the address bar and hit the Enter key). Select Toggle,
and click Apply. Note how the two initially visible subjects vanish and the
two that were hidden appear. This demonstrates that the
Firefox, set focus to the address bar and hit the Enter key). Select Toggle,
and click Apply. Note how the two initially visible subjects vanish and the
two that were hidden appear. This demonstrates that the
toggle()
com-
mand applies individually to each wrapped element, revealing the ones
that are hidden and hiding those that aren't.
that are hidden and hiding those that aren't.
Exercise 5--In this exercise, let's move into the realm of animation. Refresh
the page, and for the Speed setting, select Slow. Click Apply, and carefully
watch the test subjects. The two hidden elements, rather than popping
into existence, gradually grow from their upper left corners. If you want to
see what's going on, refresh the page, select Milliseconds for the speed and
enter
the page, and for the Speed setting, select Slow. Click Apply, and carefully
watch the test subjects. The two hidden elements, rather than popping
into existence, gradually grow from their upper left corners. If you want to
see what's going on, refresh the page, select Milliseconds for the speed and
enter
10000
for the speed value. This will extend the duration of the effect
to 10 (excruciating) seconds and give you plenty of time to observe the
behavior of the effect.
behavior of the effect.
Exercise 6--Choosing various combinations of Show, Hide, and Toggle, as
well as various speeds, experiment with these effects until you feel you
have a good handle on how they operate.
well as various speeds, experiment with these effects until you feel you
have a good handle on how they operate.
Armed with the jQuery Effects Lab Page, and the knowledge of how this first set
of effects operates, let's take a look at the next set of effects.
of effects operates, let's take a look at the next set of effects.
5.2.2 Fading elements into and out of existence
If you watched the operation of the
show()
and
hide()
effects carefully, you noted
that they scaled the size of the elements (either up or down as appropriate) and
adjusted the opacity of the elements as they grew or shrank. The next set of
effects,
adjusted the opacity of the elements as they grew or shrank. The next set of
effects,
fadeIn()
and
fadeOut()
, only affect the opacity of the elements.