$(document).ready(function () {
$('#fadein').click(function () {
$('#watch').fadeIn('slow');
});
$('#fadeout').click(function () {
$('#watch').fadeOut('normal', function () {
setTimeout(function () {
$('#watch').removeClass('jumbotron alert-success').html('<h1>Boo Yeah! Callback Triggered!</h1>')
.addClass('jumbotron alert-info').fadeIn(10)
}, 1500);
});
});
$('#fadeto4').click(function () {
$('#watch').fadeTo('fast', 0.4);
});
$('#fadeup').click(function () {
$('#watch').fadeTo('slow', 1.0);
});
});
<body class="container">
<p></p>
<div class="btn btn-lg btn-info" id="fadein">Fade In</div>
<div class="btn btn-lg btn-success" id="fadeout">Fade Out</div>
<div class="btn btn-lg btn-warning" id="fadeto4">Fade to .4</div>
<div class="btn btn-lg btn-danger" id="fadeup">Fade to 1</div>
<p></p>
<div id="watch" class="jumbotron alert-success">
<h2>Click The Fade Out</h2>
</div>
</body>