Chapter 5. Sprucing up with animations and effects
This chapter covers
- Showing and hiding elements without animations
- Showing and hiding elements using core jQuery animated effects
- Other built-in effects
- Writing our own custom animations
Have you ever looked at a website built in Flash and become envious because of all the pretty effects that Flash developers have at their disposal? Heck, you might have even become tempted to learn Flash purely for those slick effects.
Not long ago, smooth effects and animations weren’t realistic options using JavaScript. Between cross-browser issues and slow browser implementations, trying to fade or zoom elements, or even move them around the screen, was extraordinarily difficult. Thankfully, that state of affairs has passed, and jQuery provides a trivially simple interface for doing all sorts of neat effects.
But before we dive into adding whiz-bang effects to our pages, we need to contemplate the question: should we? Like a Hollywood blockbuster that’s all special effects and no plot, a page that overuses effects can elicit the opposite reaction than we intended. Be mindful that effects should be used to enhance the usability of a page, not hinder it.
With that caution in mind, let’s see what jQuery has to offer.