(^234) ❘ CHAPTER 8 ANIMATION AND EASING EFFECTS
The preceding example repeats the logic of Example 8-1, swapping out show(), hide(), and toggle()
for slideDown(), slideUp(), and slideToggle(). The setup is exactly the same, only the animation
is different. The arguments provided to these three methods are exactly the same as the arguments
provided to show(), hide(), and toggle(). Example 8-2 allows you to test every possible variation of
utilizing the slideDown(), slideUp(), and slideToggle() animations in your own scripts.
Refer to Example 8-1 for a detailed explanation of the logic taking place in Example 8-2. The next
section presents a demonstration of the last trio of built-in jQuery methods that provide animations
for showing and hiding elements: the fadeIn(), fadeOut(), and fadeToggle() methods.
Fading Elements
Fading elements is another variation that jQuery offers for revealing and hiding elements via an anima-
tion that takes an element from fully opaque to fully transparent or vice versa. After a fade in is started,
or a fade out has been completed, the CSS display property is toggled, so an element that has been faded
out no longer takes up space in the document, or an element that is fading in is visible in the document.The API is the same as the methods of the preceding two sections; only the names of those
methods and the animation used by those methods are different. jQuery offers three methods for
fading elements: fadeIn(), fadeOut(), and fadeToggle().The following example demonstrates the trio of fading methods provided by jQuery. Again the
example is the same concept provided in Example 8-1 and Example 8-2, with only a few tweaks
so that you can observe what’s possible using jQuery’s fade animations. The following example is
Example 8-3 in the source code download materials. Only the portions of each document that have
been changed are quoted to conserve space.<input type='submit'
name='exampleAnimationShow'
id='exampleAnimationShow'
value='Fade In' />
<input type='submit'
name='exampleAnimationHide'
id='exampleAnimationHide'
value='Fade Out' />
<input type='submit'
name='exampleAnimationToggle'
id='exampleAnimationToggle'
value='Toggle Fade' />
</div>
</fieldset>In Example 8-3.html only the value attributes of the submit <input> elements have been changed. These
are given labels that refl ect the fade actions that occur when the submit <input> elements are pressed.The only change to the CSS document is again the background color of the <h4> element within the
dialog; this time the background is set to yellow.div#exampleDialog h4 {
border: 1px solid rgb(50, 50, 50);