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:

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="elem">text...</div>

CSS looks like this:

css#elem {
  padding: 10px;
  width: 150px;
  height: 150px;
  border: 1px solid green;
  margin-top: 10px;
}

Now we write the methods slideUp and slideDown:

javascript$('#hide').click(function() {
  $('#elem').slideUp(1000);
});

$('#show').click(function() {
  $('#elem').slideDown(1000);
});