Slide up elements using jQuery

In this lesson, you will learn how to hide the selected element on the web page by sliding it in the up direction.

Introduction

The syntax of .slideUp() function is:

.slideUp( [duration] [easing function ] [call back function])

The slideUp() function animates the height of a selected element, which seems like hiding the element by sliding up. Once the height reaches zero, the display property of the element is set to none which immediately hide the element. The .slideUp() function doesn’t return anything.

Duration is given in milliseconds, or pre-define string values ‘fast’, ‘slow’, or ‘normal’ are used which are equivalent to 200, 400, and 600. It specifies the total time animation will take to complete.

Let’s say you use:

$('.box').slideUp('anythingelse');

Instead of raising an error, it will behave similarly to $('.box').slideUp('normal');

If you skip the parameter altogether, it will be the same as using the normal duration speed.

The second parameter is an optional string representing an easing function which determines the speed of animation progression at various points. The default value is ‘swing’, but if you want the animation to progress at a constant speed, you can use ‘linear’.

The callback function, if provided, is called when the animation is complete. In JavaScript, functions are objects and can be passed as arguments.

$('.box').slideUp('normal', function(){ alert("Animation ends."); });

Callback functions are used when you have to use more than one animation or effects in a sequence.

Example Slide up elements in jQuery

In the following example, a simple div will slide up when you click on the hyperlink ‘Slide Up’.

The HTML

<div id="container">
<div class="box one"></div>
<p><a href="#" id="anim">Slide Up</a></p>
</div>

The CSS

.box {
	width: 100px;
	height: 100px;
	margin: 2px;
}

#container {
	margin: 20px;
	padding: 10px;
	border: 1px solid #ccc;
	width: 250px;
}

.one {
	background-color: #d9eb4b;
}

The jQuery

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" >
	</script> 
        <script>
	$(document).ready(function () {
		$('#anim').click(function () {
			$('.box').slideUp('6000', function () {
				$('#anim').text("Animation ends");
			});
		});

	}); 
       </script>

What happens in this example is that .slideUp() function is being applied on the div with class ‘box’. The animation takes place over 6 seconds (6000 milliseconds), and a call back function is called at the end of the animation, which changes the text of hyperlink to ‘Animation ends’.

You can try out this code in your favorite code editor, and if you feel any confusion in the code or syntax, you can ask in the comments section below.

jQuery FadeToggle Elements

Tutorial Home

jQuery slideDown Elements