pixelkritzel/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.fade-out {
 opacity: 0;
 transition: all 2s ease;
}
</style>
</head>
<body>
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<script id="jsbin-javascript">
$('.close').click(fadeOut);

$(document).on('transitionend', '.fade-out', removeFadedElement)

function fadeOut(event) {
  $(event.target).closest('.alert').addClass('fade-out');
}

function removeFadedElement(event) {
  $(event.target).remove();
}
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
</body>
</html></script>

<script id="jsbin-source-css" type="text/css">.fade-out {
 opacity: 0;
 transition: all 2s ease;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">$('.close').click(fadeOut);

$(document).on('transitionend', '.fade-out', removeFadedElement)

function fadeOut(event) {
  $(event.target).closest('.alert').addClass('fade-out');
}

function removeFadedElement(event) {
  $(event.target).remove();
}</script></body>
</html>

## jsbin.rarugo.css
.fade-out {
 opacity: 0;
 transition: all 2s ease;
}

## jsbin.rarugo.js
$('.close').click(fadeOut);

$(document).on('transitionend', '.fade-out', removeFadedElement)

function fadeOut(event) {
  $(event.target).closest('.alert').addClass('fade-out');
}

function removeFadedElement(event) {
  $(event.target).remove();
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.fade-out {
	opacity: 0;
	transition: all 2s ease;
	}
	</style>
	</head>
	<body>
	<div class="alert alert-warning alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
	<strong>Warning!</strong> Better check yourself, you're not looking too good.
	</div>
	<script id="jsbin-javascript">
	$('.close').click(fadeOut);

	$(document).on('transitionend', '.fade-out', removeFadedElement)

	function fadeOut(event) {
	$(event.target).closest('.alert').addClass('fade-out');
	}

	function removeFadedElement(event) {
	$(event.target).remove();
	}
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery.min.js"><\/script>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div class="alert alert-warning alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
	<strong>Warning!</strong> Better check yourself, you're not looking too good.
	</div>
	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">.fade-out {
	opacity: 0;
	transition: all 2s ease;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">$('.close').click(fadeOut);

	$(document).on('transitionend', '.fade-out', removeFadedElement)

	function fadeOut(event) {
	$(event.target).closest('.alert').addClass('fade-out');
	}

	function removeFadedElement(event) {
	$(event.target).remove();
	}</script></body>
	</html>