 Okay, tutorial number 10 on jQuery, part 4 on animations. Quick review of what we did last time, refresh over here. If we click this, this grows, moves to the left and then continues to grow in height wise and I keep saying moves to the left, it moves from the left to the right each time we click. Now, let's simplify this. Going back to what it was originally, we're going to make this set to 250 pixels from the left, moving it to the right. I'm sure there's a number of times in the previous tutorials that I've said that wrong. Anyway, I'm going to move the height and width portion of this right now. So first off, let me make sure I did that right. It animates to the left. Once again, clicking again, it does nothing the second time. But at this point, we can also adjust how fast it moves. Just like we did in other stuff, we can say over here, we can say comma, we can say slow, which will do a slower animation, which is almost the same speed. But we can also preset how long we want it to take. Let's say I want it to take three seconds. I would put in 3,000 here because these are thousands of second delays. So 3,000, say, oh, I do that sometimes. 3,000, save that, refresh this and now it slowly takes three seconds to get where it's going. So once again, I'll refresh it and say a quick movement. It does three seconds to get there. Excuse me. So now the question is, what if we copy and paste that and we set this to zero? It's a good question. Refresh that after saving it. What happens? It goes there and it moves back. So it does not continue the next animation until it completes the first animation. So what's happening here, first off, it's not actually starting at zero because the page, I think in prehistoryls I said it's set to zero, which I guess the position is kind of set to zero, but the page has padding around it and you can remove padding. I might be wrong on saying that, but I'm close. Anyway, so what happens here is when we click this, it starts moving until it gets to 250 pixels from the left and then it moves back until it gets back to zero or whatever number we put in here. If I put in 100, that's 1100, now it will move 250 pixels to the right and then back until it gets to 100 pixels from the left. So we can also change the speeds of these. We can have it go out fast and come back slow, so I'll just erase the time value there and let it do the default speed. Let's refresh this when I click this. Boom. It goes out fast and comes back slow. Click it again. Boom. It goes out fast, comes back slow. So that's kind of it for the story. I just wanted to show you those two things that the animation speed can be set just by putting a comma and then how slow you want the delay to be. Here, it's three seconds, 3,000. 3,000 is three seconds. 1,000 is one second, 5,000 is five seconds. And then, of course, the animation you want. And this doesn't just work with the left positioning. You can do the same thing with height, with opacity. You can just remember that one animation does not start until the last animation finished. So once again, fast and slow back. Fast then slow back. So I thank you for watching this tutorial. I hope you're enjoying these ones on animation. And once again, we're just building up two bigger things further down the line. Gotta learn some basics first. So jQuery is very useful. I hope you're finding that. I personally like it. I've talked to some people who don't, but everybody has their opinions, but it works. It gets your job done and it's fairly supported in many browsers. So I thank you for watching. I hope you enjoy these tutorials. As always, please visit filmsbychrist.com. Be sure to subscribe, like this video if you enjoy it. And I hope that you have a great day.