jQuery 1.4 Animation Techniques - Index of

[ 35 ]
Chapter 2
The CSS is used mostly to lay out the example page, and to give the elements their
required sizing and background images. The most important rule is setting the help text to
display:none, although this isn't actually critical like when using the fadeIn() method
as the fadeToggle() method will work on both visible and hidden elements.
In the script we simply call the fadeToggle() method on the second each time the
first is clicked. The page will alternately show and hide the help text on each click of
the help icon.
With this method, the natural display style of elements is not maintained. When our
helpText is shown, it will have its display set to block, as opposed to a
element's natural display type inline. In this example, this actually helps us—if the
were set to its natural inline display, our widths and padding would not work
correctly. But it is something we need to be aware of when using the method.
Here's how the page should look after clicking the icon the first time: