This lesson covers
- Showing and hiding elements without animation
- Showing and hiding elements using core animation effects
- Extending the core easing functions
- Writing custom animations
- Controlling animation and function queuing
In the early days of the web, the capabilities afforded to page authors were severely limited, not only by the minimal APIs but also by the sluggishness of scripting engines and low-powered systems. The idea of using these limited abilities for animation and effects was laughable, and for years the only animation was through the use of animated GIF images (which were generally used poorly, making pages more annoying than usable).
Today’s browser scripting engines are lightning fast, running on hardware that was unimaginable 10 years ago, and offer a rich variety of capabilities to us as page authors. Even more important, modern browsers have implemented several CSS3 modules with standardized properties that allow us to create amazing animations and effects. Some examples of these properties are transition, transform, filter, blur, and mask. Unfortunately, there are some issues to keep in mind. The first is that the actual modules implemented depend on the browser, so not all browsers support the same modules. In addition, browsers supporting a given module have implemented it at different times and the span can be considerable. The second point is that older browsers and several mobile browsers don’t support these modules and some of them (most notably older ones) will never do so. Therefore, if we want to create an animation that works on all browsers, we have no other choice but to use JavaScript.
But even though JavaScript can help us in achieving this task, it’s not easy to create animations using native functions. Fortunately, jQuery comes to our rescue, providing a trivially simple interface for creating 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 movie that’s all special effects and no plot, a page that overuses effects can elicit a very different, and negative, reaction than what we intend. Be mindful that effects should be used to enhance the usability of a page, not hinder it by just showing off. Also remember that too many animations can slow down the performance of a website, especially when accessed from a mobile device. With those cautions in mind, let’s see what jQuery has to offer.
Leave a Reply