[Free Code Snippets + Explanation] Fading Tab Effect

So I liked the effect of showing/hiding tabs, but I felt a certain flair was missing from them. So, I wrote some code to allow the content in the container to fade in and out as it changes. I was asked about it today, so I figured I'd share so others can use it, though beware it works a little differently than your usual method of changing the display property. Read on for code snippets, or to learn how to do it yourself.

Working Example

Tab 1 Tab 2 Tab 3 Tab 4 Tab 5

This is the default text that will show up.

Code Snippets

HTML/JS

<div id="maincontainer"><div id="links"><a href="javascript:;" onmousedown="setTimeout(function(){document.getElementById('textcon').style.animation='fadeout 0.5s ease'; setTimeout(function () {document.getElementById('section0').innerHTML=document.getElementById('section1').innerHTML;document.getElementById('textcon').style.animation='fadein 0.5s ease';}, 500);}, 500);">Tab 1</a> <a href="javascript:;" onmousedown="setTimeout(function(){document.getElementById('textcon').style.animation='fadeout 0.5s ease'; setTimeout(function () {document.getElementById('section0').innerHTML=document.getElementById('section2').innerHTML;document.getElementById('textcon').style.animation='fadein 0.5s ease';}, 500);}, 500);">Tab 2</a> <a href="javascript:;" onmousedown="setTimeout(function(){document.getElementById('textcon').style.animation='fadeout 0.5s ease'; setTimeout(function () {document.getElementById('section0').innerHTML=document.getElementById('section3').innerHTML;document.getElementById('textcon').style.animation='fadein 0.5s ease';}, 500);}, 500);" >Tab 3</a> <a href="javascript:;" onmousedown="setTimeout(function(){document.getElementById('textcon').style.animation='fadeout 0.5s ease'; setTimeout(function () {document.getElementById('section0').innerHTML=document.getElementById('section4').innerHTML;document.getElementById('textcon').style.animation='fadein 0.5s ease';}, 500);}, 500);">Tab 4</a> <a href="javascript:;" onmousedown="setTimeout(function(){document.getElementById('textcon').style.animation='fadeout 0.5s ease'; setTimeout(function () {document.getElementById('section0').innerHTML=document.getElementById('section5').innerHTML;document.getElementById('textcon').style.animation='fadein 0.5s ease';}, 500);}, 500);">Tab 5</a></div><div id="box"><div id="textcon"><!--this box is what causes the text to fade in and out. Anything pasted into the sections below (headers, paragraphs, etc) will fade in and out along with it.--><div id="section0"><p>This is the default text that will show up.</p></div></div><div id="section1" class="hidden"><p>This is the first text that will show up. Could be the same as default, could be different. That's up to you.</p></div><div id="section2" class="hidden"><p>This is the second text that will show up.</p></div><div id="section3" class="hidden"><p>This is the third text that will show up.</p></div><div class="hidden" id="section4"><p>This is the fourth text that will show up.</p></div><div class="hidden"  id="section5"><p>This is the fifth text that will show up.</p></div></div></div>

CSS

<style>.hidden{display: none;} #links a {display: inline; color: #2a93ff;/*your link color here*/} #box{background-color: #c5e0ff; /*your bg color here*/ border: 1px solid #141421; /*your border color here*/ color: #141421; /*your text color here*/ height: 240px; width: 290px; padding: 10px;}/*css3 animations*/@keyframes fadeout{0%{opacity:1;}100%{opacity:0;}} @keyframes fadein{0%{opacity:0;}100%{opacity:1;}} </style>

JS Only

 <a href="javascript:;" onmousedown="setTimeout(function(){document.getElementById('textcon').style.animation='fadeout 0.5s ease'; setTimeout(function (){document.getElementById('section0').innerHTML=document.getElementById('section1').innerHTML;document.getElementById('textcon').style.animation='fadein 0.5s ease';}, 500);}, 500);">

Explanation/Do It Yourself

Now for a breakdown of how this all works... be warned, this explanation assumes you have at least a basic understanding of Javascript (what functions are, how to style divs using JS, etc). So, to run this code you'll need to go through a few steps. First, in your style tags, you'll need two CSS animations, one to fade elements out and one to fade elements in, like this:

@keyframes fadeout
{0% {opacity:1;}
100% {opacity:0;}
} 
@keyframes fadein
{0% {opacity:0;}
100% {opacity:1;}
}

Then it's time to write the javascript function that runs when you click each link. In these functions, we need to do to do the following things:

Add the fade out animation to the div containing the text
Make sure the Inner HTML of the main text div (named "section0" in this example), gets swapped out for the text in the other, hidden divs.
Add the fade out animation to the div containing the text
Add a timeout to the function so the animations are delayed and run smoothly (not doing this will result in the fading effect playing first, THEN the text swapping out, which is not what we want).

So, our JS will look something like this:

//this makes the old text fade out
setTimeout(function(){document.getElementById('textcon').style.animation='fadeout 0.5s ease';  

//this swaps the text from one section for the text in another. 
setTimeout(function(){ document.getElementById('section0').innerHTML=document.getElementById('section1').innerHTML; 

//this makes the new text fade in
document.getElementById('textcon').style.animation='fadein 0.5s ease'; 

//this is the timeout delay. I've found 500 works best for this effect, but feel free to tweak and adjust to your liking 
until you find something that looks good. The duration of the CSS animations can also be changed.
}, 500); 

}, 500);

And there you have it. If you need any further explanations or run into any trouble while running this code, feel free to ask. If you're unfamiliar with the concepts I'm laying out, check the links below.