Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:9Length:38 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Animating Other Properties

So far, you have only animated the position of an element. In this lesson, you’ll learn how to use the jQuery UI easing classes to enhance the animation of other element properties.

Related Links

2.3 Animating Other Properties

Hello and welcome back. As you can imagine we can use these new easing equations that we talked about in the last lesson, when we're animating more than just the position of an object. In the last lesson we were just animating the left position, but we can do this with other properties as well. So if you take a look in your course notes for this particular lesson you'll find our starting pen here where we have this very simple menu and we're gonna take this menu and we're gonna animate the height of each of the menu buttons whenever we hover over them and we're going to use the same jQuery UI easing equations to animate them. And so we're not really learning anything new about jQuery UI in this lesson we're just kind of expanding on what we've all ready talked about. So in our HTML we have our basic navigation unit set up which is just an unordered list inside a nav element. In our CSS we've set up the styles for it. And now we're gonna jump into JavaScript. In our JavaScript, you can see I've all ready set up the basics for a hover event in jQuery. We're pointing to the anchor tags within the list items that are inside that main nav and we've created two different functions here. So the way the hover event works in jQuery is our first function is going to run whenever we hover over an item and our second function here, you'll notice we have a comma after the first function, our second function is going to run whenever we move our mouse cursor away from that item. So that's kind of our mouseout event. So for our mouseover event which is this first function we're just gonna jump into it and we're going to use this same animate function that we used before. So we're going to say $ and then inside parentheses we're going to point to this so this will point to whichever current button we're hovering over. So we're gonna say (this).animate. And then just like before, in our animate function we're gonna have the opening and closing parenthesis, and then inside that our JavaScript object made up of an opening and closing curly bracket. So after that closing parenthesis there we'll go ahead and put a semicolon to end our statement and then inside those curly brackets we're gonna have our property value pairs. In this case I'm just gonna have one property value pair, we're going to have the height property, colon space and then right now the height of these buttons is 40 pixels. I want to bring that down to about 60 pixels. So we're gonna put 60px inside quotation marks and that's gonna be our hover animation. Right now if we hover over this we can now see that happening. The problem is when we move away from our buttons, it's not going back to the original height. So that's what we're going to take our second function here and we can actually just highlight this first function, copy it or highlight the code inside that first function and paste it here in the second function. And here we're just going animate the height back to 40 pixels. So now we have a very basic animation for these buttons and when we move our mouse cursor away from the particular button it animates back to 40 pixels. So now let's specify our duration and our easing equation. So our duration here is gonna be one second. So it's gonna be 1000 milliseconds. So again after your closing curly brackets you have a comma space and then the number 1000 comma space and then our easing equation. For our hover I'm gonna be using ease out with a capital O elastic with a capital E. And then, for our mouseout event, I'm going to be using easeInBack. You'll wanna notice I'm using easeIn instead of easeOut because I want it to happen at the beginning of the animation not at the end. So let's see if that works. We hover over our home button and we see that elastic animation as it moves up and down and wobbles into place at the end and then when we move our a mouse away we see the back animation so it kind of moves down a little bit and then animates back into its original position. So, now we can hover over any of these buttons and see those animations taking place. And that's how you can animate other properties besides just the position using jQuery and using the jQuery UI easing equations that are available to us. So thank you for watching. And I'll see you in the next lesson.

Back to the top