 Hello and welcome. This is jquery tutorial number eight, but part two on animations So last time we set it up. So when you click this button, it just slides our div tag elements over So what I'm going to do here and is Just to make things Since we're working on a small screen here since I'm recording. I'm just gonna write text This text whatever just so it's a little bit smaller over here so you can see it's it's Not as large as before because we have it set to the position absolute It's not just expanding the full width of the screen is going based on the elements within side. It's and I'm Basically last time and it still works. It slides it over The animate what the animate function does in jquery is that it takes whatever CSS styles you put inside here and it basically adds or subtracts the values of what they're at till it gets to what you said it so we didn't set a Left for the left side position of this element. So by default it should be zero and What it does is it will continuously add until it gets a 250 pixels From whatever number it's at so you can use this with all types of CSS so instead of just left there's a lot of options we can give it we can give it height with and Opacity which is the the the visibility of it how how bright it is bright isn't right I shouldn't say that but hopefully you'll understand what I mean here Rain that all in one line can be a look a little cluttered So what we're gonna do is we're gonna break this down onto multiple lines So I'm just going to move this down here indented so it this looks clean and We're gonna divide each line up with a comma now We could write this all on one line like I said and divide everything by commas, but we're gonna do it like this So we're gonna move it to the left 250. That's what we already have it set to do It starts at zero and it'll continuously add and animate it till it gets to 250 Currently its opacity is at one which is a hundred percent We're gonna change that so opacity Spell everything right opacity Colon and then the value for that currently it's one we're gonna set it to point five We'll get it to half of its current value. Don't forget our comma here next. We'll go with its width colon and then inside our quotations here. We'll give it a value of We'll say 150 and don't forget px for pixels because I always forget that So when we refresh refresh this when we click this here at this element should not only move to the left It should get wider. Although. I don't know how wide it is now Hopefully 150 is wider than what it's at and it will get it will fade out to 50% of its opacity There we go. It slid from where it was at to 150 pixels to the left It's faded out to 50% of its opacity and it got wider We can also add in here height if we wanted so we can say height colon and Then in quotations a single quotes. I put a semi colon there. Let's put a comma there And I'm going to say here We'll make it really tall. We'll say 300 that's actually really big well It should be double what this is and see I almost forgot. I always forget to put pixels save that refresh it Click here and it slides. So now it's getting wider and larger wider wider and longer wider and taller. There we go So that's a little bit more on how the animate function works Basically, it's working. We're passing it values for its style for its CSS and it will should add or subtract Until it gets to the current values. So if its height is already a hundred it should add Continuously until it gets to three hundred If it's at three hundred and we set it to one hundred in here In fact, let's set this I'm gonna set this to 30 What's probably gonna happen is the text within the the elements probably gonna pop out of the blue box But just to give you an idea here. I saved that refresh this So I don't know what the height is but it's certainly I'm sure is more than 30 it's probably at least a hundred so it should get smaller as it moves to the right. It's moving 250 pixels from the left There we go as I said, yeah that popped out just because I made it smaller And the reason there's still space up here is because the padding we have set down here So it just basically looks at is this value more or less It's going to add or subtract until it gets to the value you set up here So that's it for this tutorial just a little more on animation. Hope you're enjoying these jQuery tutorials And once again, we're just building on till we get to the point where we start working on jQuery mobile Which will allow us to create web-based applications that look like mobile device applications and Then later on we might package those into actual applications So I thank you for watching and I hope you visit films by chris.com That's chris of the K check out the link in the description If you like these tutorials give it a like so that I know to continue doing these type of tutorials Either way, I'm already have plans to do some but More my viewers like something the more I will be likely to do it in the future Be sure to subscribe so you don't miss any of my tutorials and be sure to check out the entire jQuery Playlist as well as other playlists on my website. I thank you for watching and I hope that you have a great day