jQuery in Action
Animating the display state of elements
139
No, your authors haven't lost it yet. There are four elements, but two of them
(another
(another
<div>
with text and another image) are initially hidden.
Let's use this page to demonstrate the operations of the commands we've dis-
cussed to this point. Display the page in your browser, and follow along with the
ensuing exercises:
ensuing exercises:
Exercise 1--With the controls left as is after the initial page load, click the
Apply button. This will execute a
Apply button. This will execute a
show()
command with no parameters.
The command that was applied is displayed below the Apply button for
your information. Note how the two initially hidden test subject elements
appear instantly. If you're wondering why the image on the far right
appears a bit faded, its opacity has been purposefully set to 50 percent.
your information. Note how the two initially hidden test subject elements
appear instantly. If you're wondering why the image on the far right
appears a bit faded, its opacity has been purposefully set to 50 percent.
Exercise 2--Select the Hide radio button, and click Apply to execute a
parameterless
parameterless
hide()
command. All of the test subjects vanish. Take spe-
cial notice that the fieldset in which they reside has tightened up. This
indicates that the elements have been completely removed from the dis-
play rather than made invisible.
indicates that the elements have been completely removed from the dis-
play rather than made invisible.
Figure 5.4 The initial state of the jQuery Effects Lab Page, which will help us examine the
operation of the jQuery effects commands
operation of the jQuery effects commands