You've already started watching Custom Animation: Part 1
In this video we look at how to create your own custom animations using the .animate() method.
-
0:00
[?mellow guitar music?]
-
0:03
Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com
-
0:07
jQuery Animation - Custom Animation: Part 1 with Jim Hoskins
-
0:13
In the last video, we took a look at some of the built-in effects that jQuery offers,
-
0:17
like .hide(), .show(), .fadeIn(), .fadeOut(), .slideUp(), and .slideDown().
-
0:21
In this video, we're going to take a look at how to create our own custom animations using
-
0:24
the .animate() method.
-
0:26
The keystone of custom animations in jQuery is the .animate() method.
-
0:30
The simplest form of .animate() takes a javascript object or map of properties to animate.
-
0:35
Now, this is very similar to how we could send an object or map to the CSS method
-
0:39
to set multiple CSS properties.
-
0:41
The difference is the supported styles.
-
0:44
For instance, in CSS, we could pass any CSS property to the object,
-
0:48
but in .animate(), we can only use the properties that have numeric values.
-
0:53
So, things like width, height, margin top, etc.
-
1:04
Now, if you're using the jQuery UI library, it will actually extend the capabilities
-
1:09
of the .animate() method to allow you to animate colors,
-
1:12
but we're going to talk more about that in the upcoming jQuery UI videos.
-
1:16
So let's take a little example here.
-
1:18
The simplest thing we can do is pass numeric values to our properties.
-
1:22
We're going to be using this page as our example.
-
1:26
We have a target div here with a height and a width, and it's going to be
-
1:29
absolutely positioned--right now it's at 100 and 100.
-
1:32
with a width of 200 and 200.
-
1:35
So we'll be using these different buttons to trigger our different demonstration animations
-
1:39
to show the different capabilities of the .animate() function.
-
1:43
If you go back to our code, we can do a simple transformation by passing in the top
-
1:49
to be 200 and left to be 200.
-
1:53
Now, if we just pass numeric values to these keys, it's going to be interpreted as pixels.
-
1:59
So when we call this function here, it should move to 200 pixels from the top of the page
-
2:03
and 200 pixels from the left of the page.
-
2:06
Let's flip back to our example and reload,
-
2:09
and we click and execute our function.
-
2:11
We'll see that we now animated to 200 and 200 pixels from the top and left.
-
2:16
We can refresh and see that again, and it makes a nice, smooth animation.
-
2:20
Now, if we don't want to use pixels, we can pass a string and use em's or percentages
-
2:25
in this example, we want to move it to the left
-
2:29
100 pixels, and then we're going to move it 2 em's from the top.
-
2:33
So, to do that, we do top: '2em'
-
2:39
Let's save it and refresh it, and we can see that we now move to 100,
-
2:45
which it already was at, and then 2 em's to the top.
-
2:48
We could also similarly do percentages here, but like I said, if you want to just do pixels,
-
2:52
you can do pixels like this, or just do it as a number.
-
2:55
We're going to leave this back at em's
-
2:59
If you just pass a single value to the value of one of your properties,
-
3:03
it's going to animate so it ends at that property.
-
3:05
But if you want to do incremental changes, you can use this technique to either
-
3:09
increase a value or decrease a value.
-
3:12
Let's say we want to increase the width.
-
3:15
We'll say width:, and to do an increase, we have to do it as a string, and our string has a
-
3:20
start of +=, and then let's say 50 pixels.
-
3:26
If we flip back to our example here, and we click our 'increase width'
-
3:32
we should see that it now increases 50 pixels every single time we click it,
-
3:36
so It takes the original value and adds 50.
-
3:40
Now, you have to make sure that you use exactly this formula.
-
3:43
If you try to put a space between it, it will not work.
-
3:46
So it has to be += and then the value immediately afterward.
-
3:51
Similarly, we can decrease a value
-
3:54
by using -=.
-
3:57
So here, let's try decreasing the height--we'll say -=, and then we'll say 20 pixels.
-
4:02
We could do em's or percentages, but we're going to do pixels for this example.
-
4:06
If we refresh, we'll see that our height is decreased by 20 pixels each time we click it.
-
4:14
The .animate() function also takes a second argument,
-
4:17
which is going to be the duration of the animation.
-
4:20
As we saw before, there is a default speed for animations, which was 400,
-
4:23
but if we want to define our own speeds--for instance,
-
4:26
let's say we want it to go over 2 seconds--so that's 2000 miliseconds--
-
4:31
so let's move our object to the left--we'll say 400.
-
4:38
We can click here, and now we'll move it slowly, and we can see that
-
4:42
it's taking a little longer to make its animation.
-
4:47
There is a third argument that you can use to pass to animate,
-
4:49
and that's an 'easing' function.
-
4:51
Let's fill this in right now, and we'll say that we're going to move to the left
-
4:54
over 2000 miliseconds.
-
4:56
Our third argument is an 'easing' function.
-
4:59
This is going to be a string name for a built-in 'easing' function.
-
5:03
There are 2 different ones built into jQuery:
-
5:06
there's 'swing', which is going to be the default
-
5:09
and then there's also a linear one, which we'll take a look at in a second.
-
5:11
If you use jQuery UI there will be more 'easing' functions available, and other plug-ins
-
5:14
may offer different 'easing' functions.
-
5:17
The way 'easing' functions work is it defines how quickly the animation will move
-
5:21
through different parts of your animation.
-
5:23
For instance, the 'swing easing' animation will start off very slow,
-
5:27
and then accelerate, and then slow off at the end,
-
5:30
so it has a nice, easy swinging movement.
-
5:32
Let's take a look at what that looks like.
-
5:36
So we see it starts very slow, it speeds up, and then it slows down
-
5:39
into its final position.
-
5:41
Let's take a look at the 'linear' function.
-
5:44
We'll pass it in here, and we're going to say 'linear'.
-
5:49
Let's put the value back to 100, so we'll be able to go back and forth and compare.
-
5:58
Let's flip over to our page.
-
6:01
If we move to our right using 'swing', we see it gets slow, it gets faster,
-
6:04
and then slows down again.
-
6:06
But if we do 'linear', it moves at a constant pace so you notice it goes slow, gets faster,
-
6:13
and then slows down, and 'linear' it's much more jerky at the beginning.
-
6:17
It just immediately goes at a certain speed and then immediately stops on the other side.
-
6:22
Now we've seen how to use .animate() to create our own custom animations.
-
6:26
In the next part, we're going to take a look at
-
6:28
some of the more advanced capabilities of this method.
-
6:32
[?upbeat guitar music?]
-
6:33
Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com
You need to sign up for Treehouse in order to download course files.
Sign up