DivSappear
HTML
<div id="close-me">
<p>But, at last, when turning to the eastward, the Cape winds began howling around us, and we rose and fell upon the long, troubled seas that are there; when the ivory-tusked Pequod sharply bowed to the blast, and gored the dark.</p>
<a href="#" id="close">Close me</a>
</div>
CSS
#close-me {
border: 5px solid #DDD;
border-radius: 3px;
padding: 5px;
font-family: serif;
font-style: italic;
width: 300px;
margin: 20px auto;
box-shadow: 0 0 20px #CCC;
position: relative;
padding-bottom: 20px;
color: #666;
}
a {
background-color: #4682b4;
font-style: normal;
font-family: sans-serif;
text-decoration: none;
display: block;
position: absolute;
right: 5px;
bottom: 5px;
color: #fff;
padding: 2px 4px;
border-radius: 3px;
}
JavaScript
$(function() {
$('#close').click (function() {
$(this).parent().fadeTo('slow', 0, function(){$(this).remove()});
return false;
});
});