 Okay, continuing with our jQuery JavaScript tutorials here. Quickly reviewing our last time. This is tutorial number seven, by the way, but it's part one of animations. Even though we've kind of done some animations, like in our last tutorial with the sliding up and down, the toggling sliding up and down, but we're going to get a little more into actual, more animated stuff, which is basically animating, we're going to get a little more into CSS here, just moving things around. So let's just jump right in. First off, I want that element, this element over here in the blue box to be visible at start. So right here I have in the CSS the display set to none. Let's erase that, save it, so that this is refresh over here, visible by default. Next, we're going to change its position to absolute. So, once again, inside the style here, we're going to say, position colon absolute semi colon. And we'll save that, and when we do that, you'll see that it doesn't expand the entire width of the page, it is set to its size and position based on what's within it. So now that we have that done, we can come up here into our script, because right now, we have this toggle button, and we can toggle it away because we use the toggle rather than up and down. So even though it's refresh, even though it starts visible, it knows to toggle it away. But we're not going to toggle it, we're going to move it, we're going to animate it to slide across the screen to a certain position. So right now, we have our click me element, which is inside a div tag with an ID of my2, and that's what we're looking for here. When my2, when the div tag with the ID of my2 is clicked, we're going to run this function. But instead of slide toggle, we're going to affect the other div tag, the my1 div tag, we're going to change this to say, animate. And how we're going to animate? We're going to animate by changing the CSS. So in here inside braces, the squiggly braces, we're going to say left colon, and then we are going to give it a position in pixels. We want it to move to 250 pixels over. So it's finding the left side of this element, which right now is currently should be at zero because we haven't said it's anything. We're going to change it, we'll say 250 here. Don't forget the PX, that's a common thing that I forget to do. So it's moving at 250 pixels to the left. And this is an absolute position because we told absolute down here. So it's moving it not from where it's at to 250 pixels left. It's moving it from the left side of the screen, the left side of our element to 250 pixels from the left side of the screen. So make sure I save that. I'll refresh our screen here. So there is our element. Now when I click, click me, it slides over. And this should be 250 pixels here on the left side of this. So click it again, nothing happens because it's already at that position. So we'll refresh it, click it again, and we'll move it over. And that's kind of it for this tutorial. So we'll quickly review because that was kind of short. That's all I've got planned for this tutorial, though. First off, we remove the display none so that this is visible at start. Of course, it doesn't have to be. It depends on what you want to do. But it's visible. And we set the position to absolute, which made it so that it's not the full width of the screen, but it's the width of what it needs to be based on the content inside this div tag. Then we're saying when we click on the element, the div tag that has the ID of my2, when it's clicked, we're going to run a function. This function is going to find the element that is a div tag with the ID of my2. We know it's looking for the ID because of the pound symbol here. And we're going to say we're going to animate it. We're going to animate it by changing the CSS, the style of it. And we're going to move it to the left side of that. This left here means the left side of the element. And we're moving the left side 250 pixels from the left side of the screen. So once again, click me, boom. And it's a nice smooth animation. So that's the first little look that we have here of animating things with jQuery. It makes it very simple. You don't have to write out the math of move left, one pixel, add one pixel, check. Is it at 250? If not, then move one pixel. I mean, normally, if you wrote that out yourself, I would say it'd be at least seven, eight lines of code. I mean, if you wrote each command out on a new line, because it would have to be in a loop. And jQuery has already done that. That's what jQuery is. It's JavaScript that's already been created to do functions that normally you might want to do, so you don't have to write it all out. Now that it's bad if you want to write it all out, it's just nice to have a library of stuff already available to you. So once again, thank you for watching. Please, at FilmsByChris.com, that's Chris of the K. There should be a link in the description. Be sure to watch all the videos in this series. There should be annotation to the playlist. If not, check the description. Hopefully, I put a link to it in there. And this is just a build up to making mobile web apps that we're going to be using in the future using another library called jQuery Mobile, which is built on top of jQuery. So I thank you for watching. Once again, I hope that you have a great day. Be sure to like this video if you're liking these topics. And be sure to subscribe so you don't miss anything. And have a great day.