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
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!