Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In addition to the pre-built animation functions that jQuery gives you, there is a basic Animate function that you can use to create custom animation for a wide variety of properties on page elements. So to do that, you simply call the Animate function and there are a couple of different versions you can see there on the table. One takes a series of parameters and those are the properties on the element that you want to animate. There is a Duration parameter and that's the number of milliseconds that the animation should take.
The Easing parameter is the type of easing function to use and there are only two built-in. There are plug-ins that do more, but right now jQuery has Linear or Swing built-in. Finally, there is Call Back option and the Call Back is the function that will be called when the animation is completed and that of course is optional. There is also another more complex animate function here and it's same idea, these are the properties you want to animate and the options are a set of options set in an object notation style for the animation that you want to have happen.
There is also a Stop function and the Stop function basically stops all the running animations on all of the specified elements. So you would have some jQuery selector that will produce a result set, and then you would call Stop on all those guys to stop them from animating if they are. So let's take a look at how to use the animate function. I am going to jump over to the code and we can see how it works. You will see that there is a div on the page with some text in it.
So let's try some custom animations. The first animation is when we click the Grow Right, you will see that the side of the div grows out to the right. If we click the Big Text, you will see that the text animates up in size. If we click Move Div, you will see that it animates over to the right. So let's refresh, and let's see if it works in Firefox as well. So I am going to bring this up in Firefox. There it is. So I am going to click Move, I am going to click Big Text, and I am going to click Grow Right, and you can see that it worked.
Now, let's refresh. Now let's go over to the code and see how we accomplish this. I am going to bring this up in my Editor. Down here are the buttons that control the animation. Here is the Style Sheet on the div, and that's the div that we are animating right there. Up here, you can see that what's happening is we are calling various versions of the Animate function with parameters that we want to have animated.
So the way this works is I get a reference to the element or elements that I want to animate. And in this case, it's just one, but again, I can have a result set that comes back. I call the Animate function with an object. Inside the object, I list the properties that I want to have animated. So sin this example for the width, I am setting a Width property on the object for the parameters I am passing in, and I want that to happen over the course of one second.
So in this case you can see I have got the different Animate functions controlling different properties. So this is the one for the width, this is the one that animates the font size, this is the one that animates the left side property, which is what makes it move over. However, since we are specifying things as objects, I can have multiple of these animations appear all at once. So let's copy this function here, and let's make a new button called Multiple. So that's going to be its ID.
I am going to go down here and I am just going to copy this guy, and name it Multiple, and we will label the button Everything. So when the Everything button gets clicked, let's animate everything. So we will animate the width. We will copy that and we will paste that in here. Let's animate the font size and we'll copy that and we will paste that in here.
You notice also that I am passing in a parameter for the Easing function. I am passing in Swing, which is kind of like a Smoothing function that makes the animation appear bit more natural. But I could also pass in Linear if I wanted to for this parameter, and we will see what effect that has. So now, instead of animating just one thing at a time, I have got a parameters object that will animate all of those properties over the course of one second. So let's save and let's go back out to the browser. So now, I am going to refresh.
So now when I refresh, you see that the Everything button is there. So now when I click the Everything button, you can see that everything happens all at once. The font size is animated up, the div got bigger, and it moved over to the right-hand side, because I animated the left. Let's switch over to Firefox. So I am going to refresh here as well. There is my Everything button. When I click on Everything, you can see that everything happens all at the same time. You can see that using the Animate function, you can create some pretty complex animations just by specifying the parameters that you want to animate from and animate to.
So the default, let's go back to the code really quick. When I specify these parameters like Width, 500, this is going to be the ending result. This is what the property will look like when the animation is complete. The starting value is whatever the Style Sheet sets it to. So you can see here that the Width starts out at 250, and it's going to end up at 500, and similarly, for the rest of the properties as well. So that's how you use the Animate function. We are at the point now where we can build a practical example.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104534 Viewers
56 Video lessons · 116451 Viewers
71 Video lessons · 85665 Viewers
131 Video lessons · 41003 Viewers
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.