slideUp and slideDown methods in jQuery
The methods slideUp and slideDown allow you to "roll in" and "roll out" an element back (they also accept the effect execution time as a parameter; if you do not specify it, the default time, 400ms, will be used). See how it looks in the following example.
Let's say we have two buttons and div:
<button id="hide">hide</button>
<button id="show">show</button>
<div id="elem">text...</div>
CSS looks like this:
#elem {
padding: 10px;
width: 150px;
height: 150px;
border: 1px solid green;
margin-top: 10px;
}
Now we write the methods slideUp and slideDown:
$('#hide').click(function() {
$('#elem').slideUp(1000);
});
$('#show').click(function() {
$('#elem').slideDown(1000);
});