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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Animating Colors With jQuery UI

One key property that you cannot efficiently animate with jQuery alone is the color of an element. In this lesson, you will learn how to animate color using jQuery UI.

Related Links

2.5 Animating Colors With jQuery UI

Hello and welcome back. In this lesson, we're gonna look at how we can use jQuery UI to animate the color of an object. So you can find the URL for our starting pen here in the course notes for this lesson. Once you open that up, go ahead and click on Fork to create a new copy. And we'll get started in our new copy. Now, just for a moment, I wanna go into our Settings, jump over to our JavaScript tab. And I'm gonna get rid of jQuery UI. I'm just gonna click on the X here so that all we have is base jQuery. And I'm gonna Save that and Close it. Now you'll notice that we have a menu. And what I wanna do is I wanna create a hover effect. So that when we hover over each of these menu items it moves ever so slightly to the right and it's going to change color. So the reason I took away jQuery UI for now is because I wanna show you that even though we're using a jQuery function here, we're gonna use the animate function again just like we've used before, I wanna show you that we can't animate a color using base jQuery. So, we're gonna jump into our JavaScript. And we're gonna create a hover effect. And you can review the HTML and CSS to see how everything's put together. But what we have is a main nav element. So we have a nav element with an id of main-nav and then inside that we have these list items or li's. So I'm gonna point to our list items here using our jQuery selector. And then inside quotation marks, I'm gonna type #main-nav li. That's the CSS selector we need to point to our individual list items or our individual menu buttons. And I wanna use the jQuery hover method here, so I'm gonna say .hover. And then inside parentheses, let's nudge that closing parenthesis down a couple of lines and put a semicolon at the end. Inside those parentheses we're gonna have two separate functions. Our first function will be run whenever we hover over an item. And our second function here will be run whenever we move our mouse cursor away from that item. That's how the hover function works. So let's do our first function, which is the mouseover function, and we wanna tell whichever item we're hovering over to animate. So the way we point to the specific list item that we're hovering over is we use the jQuery (this) selector. So we're gonna say (this).animate and then we need parentheses and curly brackets. And we'll nudge those closing parentheses and curly brackets down a couple of lines and put a semicolon at the end of that statement. And first of all, I'm going to do something simple. I'm gonna animate the large, the [LAUGH] marginLeft property, excuse me. So we have margin and then left with a capital L. And I'm going to increase that to a value of 10 pixels. So we need to put that inside quotation marks. And then for our other function, our mouseout function, let's just copy that and paste it in there and we'll set our marginLeft back to 0 pixels. So let's try that out, we'll hover over each of our buttons and we see that that works just fine. We hover them, they move over. We hover away from them, or we move our mouse cursor away from them and they move back into place. Well, now let's try to animate the background color. So I'm gonna hit comma at the end of our first marginLeft. Jump down to the next line and I'm gonna try to set our backgroundColor property. So we have background and then color with a capital C. And then inside quotation marks, we're going to type in the hexadecimal value that we want for our background color and I want a blue color. I'm gonna use a value of 03a9f4. And then for our mouseout function, we're gonna set our background color back to its original value of eee. Now let's see if that works. I'm gonna hover over these and we see that our background color does not change. So we can still use this code, but all we need to do now is to include jQuery UI and all of a sudden this code will start working. Because jQuery UI allows us to animate the color and background color of a particular element. So we can jump back into our Settings. We can do another Quick-add of jQuery UI and then Save & Close. And then when everything refreshes, you can see that background color starts to change. So, again, let me show you that we can do the background color as well as the text color. So we've animated the list item itself but I also want to animate the anchor tag inside that list item. The anchor tag inside the list is the one that contains the color for the text. So we're gonna do another animate function. I'm gonna point to (this) and I'm gonna do a find. So I'm gonna say (this).find. And we're gonna find an a element inside this particular list item. And we're gonna to do an animate function on that element. So inside that animate function, I just want to change the text color to #eee. And then let's just copy that particular animation. And let's paste it down here in our mouseout function. And let's change that text color back to a value of 444, which is what it is by default. So now you can see, when we hover over these buttons, the text brightens up to that light gray and when we move away from it, it goes back to the dark gray color. So now we're animating both the background color and the text color for each of these buttons. So thank you so much for watching. And I'll see you in the next lesson.

Back to the top