Join Joe Marini for an in-depth discussion in this video Introduction to jQuery animations, part of jQuery Essential Training.
- View Offline
- If you've used the web at all recently, you've probably noticed an interesting trend over the past few years. There is a lot of great animation and effects in today's modern web applications. It used to be that you had to use plugins to achieve a lot of these animation effects. Well, jQuery makes it easy to provide rich animation and effects to the users of your site. In fact, in many cases you can do some pretty neat things with just one or two lines of code. In this chapter, we're going to look at how you can use jQuery to build the kinds of animations and effects that give your web apps a polished, professional look and feel.
We see how to do such common things as revealing and hiding elements, fading elements in and out, moving elements around on the screen, and building custom animations to fit your needs. Before we jump in and start writing our own code, let's jump over to the jQuery website to get an idea of what kinds of animations and effects are available. Here, on the jQuery website, let's click into the API Documentation and scroll down to the Effects section. You can see that there's a variety of functions available to use when building animations and effects.
So, let's start with the Basics category. This category covers a few functions that are used to show and hide elements, and it's where we'll start in this chapter. Next, let's take a look at the Fading section. These are functions for fading elements in, out, or to a specific opacity level, and you can get some nice effects from using these functions, and we'll see more of those in a little bit. Let's take a look at the Sliding category next. Here are some functions for sliding elements into or out of view which is another take on the reveal and hide category.
And then finally, there's the Custom category. The Custom category provides a base animation function for you to build your own effects. All right, well, if you're intrigued by the possibilities that this API presents, then let's jump in and start by learning the basics of jQuery animation.
- What is jQuery?
- Using selectors and filters to extract information
- Creating, inserting, and animating page content
- Handling events
- Understanding jQuery statement chaining
- Working with CSS
- Building event handlers
- Animating with jQuery: showing, hiding, and fading page elements
- Working with AJAX