Using color animation - jQuery Tutorial

- The core jQuery library that jQuery UI is built on provides an animate function that lets you animate certain properties of CSS on elements on the page. Unfortunately, one of the things it does not do is let you animate colors which is a pretty common thing these days. jQuery UI ships with the jQuery Color plugin as a default. This lets you animate colors which I'll show you how to do in this movie. Here in the snippets I've scrolled down to the Color Animation section, and let's open up ColorAnim_start. Let's just go ahead and launch this in the browser. You can see here in my browser that I've got a div, and it has a set of colors attached to it. The background color is this light blue. The text color is black. It has a border that's kind of a grayish color around the outside. We're going to animate these colors from one set to another. To do that, let's go over to the code, and in the snippets let's copy this first example right here, and we'll paste it inside my document ready function here in the example. When the user clicks on this button, the anim1 button, I've got an event handler that's gonna handle the click for that button. It's gonna call the animate function on my example div element. It's gonna animate the background color from whatever it currently is to red. It's gonna animate the color of the text from whatever it currently is to white, and it's going to animate the border color from whatever it currently is to blue. It's going to do that over 800 milliseconds. Again, this is the regular core animate function that comes with the base jQuery library. jQuery UI is simply plugging in its color animation features into the existing animate function. Let's save this, and let's go back to the browser. Now let's click on Animation 1. You can see that the color fades from the blue background to red. The color of the text fades from black to white. And the border goes from gray to blue. Let's go back to the code. Let's copy the second example for button number two. Button number two which I'm going to paste in right here, when I click on button number two, it's going to animate the colors back to their originals although I've specified them differently. Here you can see I'm using the hex notation for the colors; whereas, here I've used named colors. Let's save. Let's refresh. Let's animate the colors up, and let's animate them back. Pretty straightforward. This is one of the great things about the way that jQuery UI and jQuery is built. It's modular. When you get plugins for these libraries, they can just affect the existing functions that you're already using. You can see here that the jQuery Color Animation feature works on this set of colors right here. So colors for backgrounds, borders, text color, and various other CSS properties that accept colors as their values.