Tag Archives: animate

Episode 13: Animating Color

Animating Color

If you want to easily create animations in jQuery, you can use the animate() method to animate any numerical CSS property – font-size, width, padding, margin, left, top, etc. However, even though colors in CSS are technically numerical, the jQuery animate() method won’t animate colors.

The jQuery team released the jQuery Color plugin which adds support for color animation, but with CSS3 and the transition property, we don’t even need the plugin to create color animations. We can use jQuery in combination with CSS for animating color without using the Color plugin.

We get started by creating a simple grayscale style for a <div>. Then we add a hover style to the <div> to show how we can use CSS to change the color scheme of our <div> on hover using just CSS. It’s okay, but it’s just a sudden color change.

So we take a look at how we can use the CSS transition property to create an animation for that color change. All we have to do is add the transition property to the grayscale styling for our <div>. We specify which property or properties we want to add an animated transition to, then we say how long the animation should take to complete. You can get even more specific about your transition, so check out this article for more information on what you can do.

CSS alone works great as long as we only want the animation to happen when we’re hovering, but if we want to animate the color change on click, we have to step into using a bit of jQuery. We can use a CSS class in combination with a click event handling function to animate the color change when we click. All we have to do is use jQuery’s addClass method to add the class.

And if we want to toggle the class on and off, we can just use jQuery’s toggleClass method instead. We take a look at how we can use different color schemes for each individual <div> so that each changes to a different color when clicked.

CSS3 makes some pretty amazing things possible without even using JavaScript, but when we can use CSS3 in combination with JavaScript, we have the power to do some pretty awesome stuff with just a teeny bit of code.

Episode 9: Animated Tabs

Animated Tabs

In Episode 4, we learned how to create simple tabs without using a jQuery plugin. In today’s episode, we’ll make those tabs even spiffier by adding a cool animated transition when switching tabs.

We’ll get started with the code we created in Episode 4, which you can download from GitHub.

The HTML will remain exactly the same. In the CSS, we just have to make one small change – by moving styling from the individual <div>s with a class of .tab and instead applying those styles to the <div> that wraps the collection of tab content <divs>s.

The rest of the changes happen in our JavaScript. And even most of that stays the same. We just remove the single line of code that handled the hiding and showing of the different sections of tab content, then write a new couple lines of code to add the animation.

We’re actually combining three animations. When we click a new tab, first we fade out whatever content happens to be visible at the time. Next, we animate the height of the container to match the height of the new tab content section. Finally, we fade in the content of the new tab container.

Combined, these three animations provide a smooth transition between the content of the different tabs. It’s a little extra something something that helps our websites feel more polished and professional. Thanks to jQuery adding this kind of extra bit of polish is simple and straightforward.

In this video, we take our first look at jQuery’s animate() method, and we also use a callback function for the first time. We’ll dig more into animation and callbacks in future episodes, so stay tuned!