jQuery slideUp()

Sliding the elements upside is one of the sliding effect that jQuery library supports.

The slideUp() method is used to slide up the selected elements.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("#flip").click(function(){
    	$("#panel").slideUp();
	});
});
</script>
 
<style>
#panel, #flip {padding: 2px;text-align: center;background-color: yellow;border: solid 5px red;}
 
#panel {
	padding: 50px;
 
}
</style>
</head>
<body>
 
<div id="flip">Click me. I want to go up</div>
<div id="panel">THANKS!</div>
 
</body>
</html>

Try it

JS Bin on jsbin.com

There are also some optional parameters that can be passed along with the slideUp() method.

Syntax:

$(selector).slideUp(speed,opacity,callback);

Speed:

  • Speed is an optional parameter that can be passed as an argument in the slideUp() method.
  • Speed specifies the duration of the effect (time taken in sliding the element upside).
  • Speed parameter can take value as “fast”, “slow” or values in milliseconds.

Callback:

  • Callback is an optional function that is often passed as an argument in slideUp()method.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("#flip").click(function(){
    	$("#panel").slideUp(5000);
	});
});
</script>
 
<style>
#panel, #flip {
	padding: 4px; text-align: center; background-color: pink; border: solid 3px blue;
}
 
#panel {
	padding: 50px;
}
</style>
</head>
<body>
 
<div id="flip">Click me. I want to go up</div>
<div id="panel">THANKS!</div>
 
</body>
</html>

Try it

JS Bin on jsbin.com

Please Share