Understanding animation easing
Viewers: in countries Watching now:
- What is jQuery?
- Installing jQuery
- Performing multiple operations with chaining
- Using classes
- Adding, modifying, and removing content dynamically
- Triggering a change with event binding
- Creating a dynamic contact form
- Building a slideshow gallery
- Creating simple jQuery animations
Understanding animation easing
So that is, how fast it is at certain parts and how slow it is at other parts. The way we work with these is calling them by name, by a string. So if I want to set my easing on this animation, I just pass the string with the name that I one want. jQuery has two built in, the one it uses, if you don't specify any easing function, is called swing and with this one your animation starts, it kind of speeds up and then slows down toward the end. The other one that's build in is called linear and I am going to add this one in now and save this and switch over to my browser and reload this page.
Now when I click the image you will see that over the course of the animation the speed does not change. It just proceeds without changing the whole way over. Let's see if you can see the difference, I change this back to swing and reload. So the difference between these two is pretty settled I think, its there but it's kind of settled. So, those are the two they are just built into jQuery, but there are lots, lots more available. There are two main sources for adding easing functions into your jQuery. One of them is the jQuery easing plugin which is just a standalone plugin that gives you a whole bunch more easing functions.
But all the rest of these are available if you're using CSS as well. And if you watch when I mouse over these, the little arrow moves using that easing plugin. You can see some of these are a little slow at the beginning and then ramp up real fast. There's all these different ways that this thing can go. Now, as it happens, this sample site has the jQuery easing plug in already built in. So let's try some of the more dramatic examples. And you can see how easing effects the way an animation looks. Let's grab this one, I'm going to copy its name. Switch over to my editor and plug it in here.
Just to make it a little more dramatic, I'm going to make this animation take three seconds instead of two. Switch back over to the browser and reload this page. Now watch what happens. It's kind of herky jerky, wobbles back and forth. But gets to the same place and it takes the same amount of time. It's just that the properties that I've asked it to animate, have that other function applied to them. So they get moved around a little bit as they proceed. Let's try another one, ease outbounds. Plug that in. And reload. So, with this one, you kind of bounce your way into the end of the animation.
Some of these, as you can see, are very dramatic. Most of the ones that are available in CSS, also, are much more subtle. I'll try this one. Reload again. So, wow, that one had a big effect, because it displaced a lot of stuff as it went. But you can see there are a lot of options available here. So again, this project has the jQuery easing plug in built in to this minimized plugins file. So you didn't have to install it separately. In another jQuery project that you're working on, you'll probably need to install it just the way you'd install any other plug in before you can start using it.
And of course, as I mentioned, many of these easing effects are available if you use CSS animations. So if you want to combine CSS and jQuery, you could do it that way. But that's a look at what easing functions are and how you can start using them in your jQuery animations.
There are currently no FAQs about jQuery for Web Designers.