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