jquery-vanish
Version:
[](https://travis-ci.org/matheusazzi/jquery-vanish) [](https://codeclimate.com/r
76 lines (65 loc) • 1.79 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Vanish</title>
<style>
body {
font-family: Helvetica, Arial, tahoma, sans-serif;
}
.samples h1 {
font-weight: normal;
}
a {
font-size: 80%;
text-decoration: none;
color: #337ab7;
}
a:hover {
color: #2e6da4;
}
small {
width: 70px;
display: inline-block;
}
button {
cursor: pointer;
padding: 8px 14px;
font-size: 16px;
color: #fff;
border-radius: 4px;
background-color: #337ab7;
border: 1px solid #2e6da4;
outline: 0;
}
button:active {
background-color: #2e6da4;
}
</style>
</head>
<body>
<h1>jQuery Vanish - <a href="http://github.com/matheusazzi/jquery-vanish">See on Github</a></h1>
<div class="samples">
<h1><small>3s - </small><span class="sample1">Hello Foo Bar</span></h1>
<h1><small>3s - </small><span class="sample2">Hey Hello Foo Bar from some Baz</span></h1>
<h1><small>5s - </small><span class="sample3">Hello Foo Bar</span></h1>
<h1><small>8s - </small><span class="sample4">Hello Foo Bar</span></h1>
<h1><small>10s - </small><span class="sample5">Hello Foo Bar</span></h1>
</div>
<button data-start>Start Vanishing</button>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="jquery.vanish.js"></script>
<script>
$(function() {
$('[data-start]').on('click', function() {
$(this).fadeOut(250);
$('.sample1').vanish();
$('.sample2').vanish();
$('.sample3').vanish({ duration: 5000 });
$('.sample4').vanish({ duration: 8000 });
$('.sample5').vanish({ duration: 10000 });
});
});
</script>
</body>
</html>