Fade in and fade out CSS

This fades in and out using CSS transitions

by akmiecik

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div id="y2021" class="fader">
    When you click the button below I'll fade out *or* fade in using the magic of transitions.
</div>

<button id="fadeTable" type="button" class="btn btn-primary btn-lg btn-block">2021</button>

CSS

.fader {
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    -webkit-transition: opacity 2s linear;
    transition: opacity 2s linear;
        opacity: 0;
}

.fader.fadedOut {
    opacity: 1;
}

JavaScript

$("#fadeTable").click(function(){
    $("#y2021").toggleClass("fadedOut");
})