Custom Animation: Part 1

[?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