CSS3 FaceIn with Jquery + Bootstrap 3

CSS3 FaceIn with Jquery + Bootstrap 3

by Andrew Pougher

HTML

<div id="myAlert" class="alert alert-warning fade" role="alert">This message will self destruct in 3 seconds</div>

CSS

.fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -moz-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}
.fade.in {
    opacity: 1;
}

JavaScript

function showAlert() {
    $("#myAlert").addClass("in");
}

function KillAlert() {
    $("#myAlert").removeClass("in");
}

window.setTimeout(function () {
    showAlert();
}, 1000);

window.setTimeout(function () {
    KillAlert();
}, 4000);