jQuery in Action
152
CHAPTER 5
Sprucing up with animations and effects
5.4 Summary
This chapter introduced us to the animated effects that jQuery makes available
out-of-the-box, as well as to the
out-of-the-box, as well as to the
animate()
wrapper method that allows us to cre-
ate our own custom animations.
The
show()
and
hide()
commands, when used without parameters, reveal and
conceal elements from the display immediately, without any animation. We can
perform animated versions of the hiding and showing of elements with these
commands by passing parameters that control the speed of the animation, as well
as providing an optional callback that's invoked when the animation completes.
The
perform animated versions of the hiding and showing of elements with these
commands by passing parameters that control the speed of the animation, as well
as providing an optional callback that's invoked when the animation completes.
The
toggle()
command toggles the displayed state of an element between hid-
den and shown.
Another set of wrapper methods,
fadeOut()
and
fadeIn()
, also hides and
shows elements by adjusting the opacity of elements when removing or revealing
them in the display. A third method,
them in the display. A third method,
fadeTo()
, animates a change in opacity for
its wrapped elements without removing the elements from the display.
A final set of three built-in effects animates the removal or display of our
wrapped elements by adjusting their vertical height:
slideUp()
,
slideDown()
, and
toggleSlide()
.
For building our own custom animations, jQuery provides the
animate()
com-
mand. Using this method, we can animate any
CSS
style property that accepts a
numeric value, most commonly the opacity and dimensions of the elements. We
explored writing some custom animations that remove elements from the page in
novel fashions.
explored writing some custom animations that remove elements from the page in
novel fashions.
We wrote the code for these custom effects as inline code within the on-page
JavaScript. A much more common, and useful, method is to package these custom
animations as jQuery commands. We'll learn how to do that in chapter 7, and
you're encouraged to revisit these effects after you've read that chapter. Repack-
aging the custom effects found in this chapter, and any that you can think up on
your own, would be an excellent follow-up exercise.
animations as jQuery commands. We'll learn how to do that in chapter 7, and
you're encouraged to revisit these effects after you've read that chapter. Repack-
aging the custom effects found in this chapter, and any that you can think up on
your own, would be an excellent follow-up exercise.
But before we write our own jQuery extensions, let's take a look at some high-
level functions that jQuery provides.