jQuery slideUp and slideDown

Created December 15, 2010

.slideUp()

.slideDown()

Here is a beginner tutorial on using the jQuery slideUp() and slideDown() functions. This article contains the code used to perform the jQuery slide functionality. Watch the video to be shown from beginning to end, just how easy it is to implement the jQuery slideUp and slideDown functions.

To use the slideUp and slideDown functions on an object, the code looks as follows:

$('#id').slideUp();

$('#id').slideDown();

If you were to perform the slideUp and slideDown functions inside of a button click event, the javascript code would look as follows:


$(document).ready(function(){

      $('#button').click(function(){
            $('#object').slideUp();
      });

});

The following is a quick beginner video tutorial on using the slideUp() and slideDown() functionality.

You can view a live demo of this functionality by clicking below:

DEMO

The code from the video is displayed below:

<html>
<head>
<title>jQuery slideUp and slideDown</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
	$('#up-button').click(function(){
		$('#box').slideUp();
	});
	
	$('#down-button').click(function(){
		$('#box').slideDown();
	});
});

</script>

</head>


<body>

<input type="button" value="Slide Up" id="up-button" />
<input type="button" value="Slide Down" id="down-button" />

<div id="box" style="display:block; background:#ccc; width:350px; height:150px;"></div>

</body>

</html>

This was just a simple example of how to use the jQuery slideUp and slideDown functionality.

Advanced slideUp and slideDown: There is also a way to add certain types of effects or easing to the slideUp and slideDown animations. Additionally you can run some more code in a function once the animation has been completed. A quick representation is shown below:


$('#button').click(function() {
      $('#id').slideUp('slow', function() {
           // the animation is completed... run code
      });
});

In the above example, you can specify whether you would like the slide animation to run 'slow' or 'fast'. There are also several other effects and easing that can be used, but we will not explain that here just yet. You can also see that above you can insert java-script code to run after the animation has completed.