Tag Archives: animation

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!

Episode 7: Built-in jQuery Animations

Built-in jQuery Animations

We have a short and sweet podcast today reviewing the animations that come built into jQuery. Of course, jQuery will allow you to create your own custom animations, and we’ll cover just how to do that in a future episode. But today, we’re just going to take a look at the animations that are included out-of-the-box.

We’ll set up a few definition lists to display our different animations, which include:

  • show(), hide(), and toggle()
  • slideUp(), slideDown(), and slideToggle()
  • fadeIn(), fadeOut(), and fadeToggle()
  • fadeTo()

After creating our simple HTML file, we add just a few super simple styles to our CSS page that will make the animations easier to see. Then we step into looking at what each of the animation methods does. First up, show() and hide() just toggle the display of the item to make it disappear from and appear on the page. There’s also the handy toggle() method that alternates between hiding and showing the target element.

Next, we take a look at the sliding animations, which we made good use of in our Accordion episode last week. We learn how to use slideUp() and slideDown(), and then, of course, slideToggle() to alternate between showing and hiding the target element.

Finally, we’ll play with fading animations. We take a look at fadeIn(), fadeOut() and fadeToggle(). Then, we take a look at one bonus fading animation – fadeTo() – that’s included with jQuery that allows us to fade an item to a specified opacity at whatever speed we choose.

You’ll find lots of uses for these default animations that are included with jQuery. Have fun experimenting and learning more about them!

Episode 6: jQuery Accordion

jQuery Accordion

In this video, we’ll walk through creating a simple content accordion. All of the sample content for the demo comes from Wikipedia.

Since we’ll be using a lot of special characters, we have to pay special attention to our charset meta tag to make sure all those special characters show up as expected rather than looking look a bunch of gobbledygook.

There are lots of different bits of HTML markup that can be used to create the HTML markup for an accordion, but I like to use a definition list (<dl>). I use the <dt> tags for the accordion titles and the <dd> tags for the accordion content areas. The <dd> tag can contain any other tags so the content can be quite complex, including headings, paragraphs, lists, images, videos, etc.

In this case, I’m making use of the new HTML <figure> and <figcaption> elements for presenting the photos and captions for each city. For the image captions, I’m using the captions provided by Wikipedia to ensure that the photographers are correctly credited for the use of their images.

Once we’ve got all of our content on the page, we’ll style that up with a bit of CSS to make it look like an accordion. After removing some of the browser’s default styles, we add a background color and some rounded corners to the titles and a border around the content areas.

Now we can see the page the way our site visitors who don’t have JavaScript enabled will see. The page looks nice, and these site visitors will never know they’re missing out on anything at all.

With the HTML and CSS out of the way, we can jump into the JavaScript. First up, we hide all of the <dd> tags to fold them out of the way. Then, we add a click handler to the <dt> tags that moves to the next <dd> tag and shows it when the <dt> is clicked.

That’s a bit of progress, but we have to add a bit more finesse to get it working like an accordion, like closing any other open panels when we click to open a new one. We make use some of the DOM traversal methods we used last time – next() and siblings(). We also make use of some of jQuery’s built-in animations – slideUp(), slideDown(), and slideToggle() – which we’ll be covering in detail in next week’s video.

Now that the basic accordion is working, we’ll apply some snazzy CSS and JavaScript techniques to write some special additional styles for the accordion to make it extra special and polished. We take a look at the famous body-class switching trick to write separate CSS styles depending on whether or not JavaScript is enabled. Using the body class, we write some extra CSS to make the <dt>‘s look and work a little more like buttons, and we add a class to the <dt> when they’re open so that the open panel can be styled a bit differently from the panels that are closed.

Pro Tip: Rather than adding color changes, sizes, borders and other CSS changes in your JavaScript, put style changes in your CSS file instead, and then just use JavaScript to add and remove CSS class names to control changes in style.

We’ll wrap up by making a few little optimizations – we toggle the ‘+’ and ‘-‘ characters to show if the panel is opened or closed, and style the <dd> content areas to match the orange color of the open titles. And we learn how to use a CSS3 transition to animate a background color change.

Creating a simple accordion is pretty simple – most of the work is in the CSS, and we use just a few lines of JavaScript to make it all work.