2.4 Sliding Up and Down

Hello, and welcome back. In this lesson, we're going to take a look at some other methods that we can use the jQuery UI easing equations with, other than just the animate method. More specifically, I'm gonna look at these slide down method. And this will work the same with slide up and slide the toggle. The slide down method allows you to take a hidden piece of content and animate it open so that it becomes visible to the user. And we're gonna do that using these three paragraphs here. So our first paragraph is gonna be visible by default. And we're gonna have this more button. And when we click on that more button, the rest of this content is going to slide open, it's gonna animate open. And if you've used jQuery before, you've probably used this particular method. But in this lesson, we're gonna make that animation a little more interesting by using the jQuery UI easing equations. So you can take a look in our HTML. We have this main content section here underneath our header. And it has a paragraph by itself. And then under that is the more button, which we've used some absolute positioning to put it down here in the lower right. And then after that we have this div with a class of more-content. And it has our other three paragraphs in it. This more-content div is the one we're going to be sliding open. But first, we need to make it invisible. Now you could try to hide it using CSS and then use the slide down function. But I'm not gonna do it that way. Because if we were to simply hide it in CSS and then play the slide down, a method or animation, then we would get a little bit of a hiccup in the animation. And it wouldn't look quite right because jQuery doesn't know how tall it's supposed to be. And so it's trying to calculate that height on the fly. So what we're going to do in our Java Script is first we're gonna take this visible div that has the three paragraphs in it. We're going to calculate the height of it. And we're going to use JavaScript to apply that height to the CSS height property. And then we're going to hide it. And then once we have that height set in CSS then we can get a smoother animation. So, at the very top of our JavaScript here, right now all we have is the JavaScript for our animations at the very top with our text animating in, which is what we saw a couple of lessons ago. I'm gonna nudge all of that down a couple of lines. And, actually, before we get started let's make sure that we fork that to create a new copy for ourselves. And with this new forked copy, let's get started. So we'll nudge our code down a couple of lines. And I've got a piece of content that I'm going to point to a couple of times. It's this more-content section here that has the three paragraphs in it. So I'm gonna store that, or a reference to that object, in a variable called more. So we're gonna set that equal to the jQuery selector for the more-content class. So that will point to those three paragraphs for us. And then I'm going to set the height of that element before I hide it. So the way we do that is we can say more.CSS. And then inside parentheses the first thing we're looking for is the name of the CSS property that we are going to set a value for. And that's gonna be the height property. And then the second value we're looking for is the current height of that div. And the way we get that current height is we point to more, once again, which since we created this variable up here, it's pointing to that div, we're gonna say more.height(()). And then a semi-colon at the end of that statement. So, again, this line of code is creating a new CSS rule for that bottom section that has the three paragraphs in it. It's creating a new CSS rule for the height and setting it equal to the current height that jQuery has calculated for us. Then, once we've done that, we can simply say, more.hide(), which is a jQuery method that will hide that content, as we can see here. So now we just need to make a click event for our more buttons. Let's come down here to the very bottom. And the more button there has a class of btn-more. So we're gonna point to that here. So .btn-more.on. And then inside parentheses, "click", and then the function that we want to run whenever we click on that. So inside that function the first thing I wanna do is hide that more button. So we're gonna say, this, inside the parenthesis of our jQuery selector .hide(). So once we click on that more button, it will become hidden. And then after that we want to slide down this more section, which, again, we stored in this variable called more. So we're gonna say more.slideDown. And then we can specify the duration and the easing equation we want to use. So first of all, let's just set the duration. Let's set it to 2,000 milliseconds, which is the same as 2 seconds. And let's click on the more button and see what happens. We can see in nice smooth animation. And by default that looks pretty good. That is the swing easing equation that's used by default. But, again, we can go into this method and use any of the jQuery UI easing equations to make it a little more interesting. So, after the comma, we can put inside quotation marks, easeOutBounce, to see a whole new animation. So the page reloads, we click on more, and we see that it bounces into place at the bottom. So that's just an example of other methods that we can use in jQuery that make use of these jQuery UI, easing equations. So, once again, thank you so much for watching. And I'll see you in the next lesson.