From the course: jQuery Essential Training

Introduction to jQuery animations - jQuery Tutorial

From the course: jQuery Essential Training

Start my 1-month free trial

Introduction to jQuery animations

“

- 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.

Contents