Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.