2.1 Basic jQuery Animation

Hello and welcome back. In this lesson I want to do a quick review of how to animate with jQuery using the animate function. So this particular lesson is not specific to jQuery UI, it's just for the base jQuery framework. So you can find the URL for our starting Pen here in your course notes for this lesson. Once you open up that starting Pen, I want you to click on the fork button to create a new copy of that pen. And we'll be starting with this new copy. So what I want to do is I want to take this h1 and h2 element and I want to animate them into place. And again we're gonna be doing that using the JQuery animate function. So as you can see in our HTML, we have a div with a class of container. Inside that, we have a div with a class of banner. And then we have an H1 and an H2 tag in our CSS. You can see that our container has a width of 600 and a margin of 0 auto to center it on the stage. And then our banner element gas the background color set, the text color, the padding, and then the text is aligned to the center. And you'll notice that our h1 and h2 elements here are nested inside the banner class. And if you're not familiar with SASS then that might look confusing to you. What we're using here is SASS which basically compiles into CSS. And if you want to turn that on, you can go into your Settings, go to your CSS tab, and then under CSS Preprocessor, you can choose SCSS. And that's what I'm going to be using for this course just because it's a little bit easier to type. So, if you've never used SASS before, you can nest tags inside other tags, so this would be the same thing as creating a banner class in CSS with the following four properties on it, and then creating another class, called, .banner, or another rule, I should say Called the .vander H1. And then that would have these two rules and it. And then we would have another rule called .vander H2 with these two properties and it so SASS just makes this a little bit Easier and a little more concise for us. So we need to make a couple of changes before we can jump into jQuery and animate it. When we animate this text, I want it to end up where we see it right now, which means that initially, I want to shove it off the edge of the screen. So I want to push it off to the left. So in our h1 class here, or h1 rule, after our font size, I'm also going to add a position property and set it to relative. And then in order to move it off the left side of the screen, I'm going to set the left property to a value of -600px and that'll move it all the way off the edge. And then, I'm going to do the exact same thing to our h2, so I'll just highlight those two lines there and paste them down below. So now we've nudged both of those pieces of text off to the left. They're out here to the left of our banner, we can no longer see them. And now, in our JavaScript, we're going to use jQuery to animate them on. Now this short course is going to be very helpful if you already know the basics of jQuery because we're going to jump right into this. But even if you've never used it before, you should get the hang of it pretty quickly. The way we point to an element in jQuery is we type a dollar sign. And then inside parentheses and inside quotation marks, we would type in the CSS selector for the item we want to point to. All right, now I want to point to the h1 element that's inside that div with a of banner. So the way we do that is we type .banner h1, and we want to tell that h1 to animate using the jQuery animate function. And the way we do that is we type .animate, open and close parentheses. Now inside the parenthesis for this function, we need a JavaScript object. And the way we create that is with opening and closing curly brackets. Inside those curly brackets we can have a set of property value pairs to define how we're going to animate this. And all we're really going animate here is the left property, and we're going to animate it to a value of 0 pixels. Because right now remember it's off to the left at -600 pixels. We just want to animate it backward, start it at 0 pixels. So we're going to animate the left value. So the property name is called left, colon space and then inside quotation marks. So I'm going to type 0px and that should animate it back on to the stage in the original position. And then we're going to put a semi-colon after that closing parenthesis there. But we can also change the speed of this animation. And the way we do that is we come to the end of our JavaScript object denoted by this closing curly bracket. And after that curly bracket but before the closing parenthesis, we're going to type comma, space and then the duration that we want that animation to last. And this is going to be in milliseconds, so if we want it to last two seconds we would say 2000 milliseconds. Now you'll see that that animation happens a little bit slower. So we're going to do the same thing for our h2. So I can just copy this particular line of code or these three lines of code, skip a couple of lines and paste it. And then we'll just change this one to an h2. And now when it refreshes, we'll see both of those items animate on. Now one cool thing about jQuery is we can very easily create a delay before something animates and we're going to do that with our h2. So before we have .animate, I'm going to type .delay and then inside parentheses here we can type in the duration that we want to delay before it animates on. And let's say that we want it to delay half a second, that would be 500 milliseconds. So now we'll see the first item animate on and then the second one animates on a little bit Afterwards. Now this is the point where we're going to reach the limitations of jQuery. We can control the speed of our animation or the easing of our animation by typing in an easing class after the duration. So after our 2000 here, we can type comma space and then inside quotation marks, we can type in the easing function we want to use. Well, if we're just using jQuery, the base jQuery framework, we only have two options. We have linear which will move on at a constant rate of speed and then just come to a sudden stop at the end or we have swing which is basically a ease in out method. So it starts off slow, speeds up through the middle and then slows down again at the end. And that swing value is actually the default. So again that brings us to our first major limitation of using just the base jQuery framework to animate. So in the next lesson, we're going to take this to the next step and we're going to look at some other easing classes that are made available to us when we use the jQuery UI framework. So thank you for watching and I'll see you then.