Fade in and fade out CSS

This fades in and out using CSS transitions

by johnny_reilly

HTML

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

<button id="showHideButton" type="button" class="btn btn-primary btn-lg btn-block">Show or Hide</button>

CSS

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

.fader.fadedOut {
    opacity: 0;
}

JavaScript

$("#showHideButton").click(function(){
    $("#alertDiv").toggleClass("fadedOut");
})