Demo of slideUp and slideDown Effects with slow , fast & milli seconds delay using JQuery

CSS

<style>
.msg{ 
position: absolute;
FONT-SIZE: 12px;
font-family: Verdana;
padding:10px;
width:350px;
background-color: #f1f1f1;
}
</style>

HTML

<div class="row">
  <div class="col-md-4"><input type=button id=b1 value='slideUp(slow)'><input type=button id=b2 value='slideDown(slow)'></div>
  <div class="col-md-4"><div id=d1 class='msg'>Hide this layer by using buttons</div></div>
</div>
<br><br><br>
<div class="row">
  <div class="col-md-4"><input type=button id=b3 value='slideUp(fast)'><input type=button id=b4 value='slideDown(fast)'></div>
  <div class="col-md-4"><div id=d2 class='msg'>Hide this layer by using buttons</div></div>
</div>

<br><br><br>
<div class="row">
  <div class="col-md-4"><input type=button id=b5 value='slideUp(5000 mSec)'><input type=button id=b6 value='slideDown(5000 mSec)'></div>
  <div class="col-md-4"><div id=d3 class='msg'>Hide this layer by using buttons</div></div>
</div>

jquery

<script>
$(document).ready(function() {
///// slide up /// 
		$('#b1').click(function(){
		$('#d1').slideUp('slow');
		})
//////Slide Down ////////
		$('#b2').click(function(){
		$('#d1').slideDown('slow');
		})
////////////////
///// slide Up /// 
		$('#b3').click(function(){
		$('#d2').slideUp('fast');
		})
//////Slide Down ////////
		$('#b4').click(function(){
		$('#d2').slideDown('fast');
		})
////////////////
///// slide Up /// 
		$('#b5').click(function(){
		$('#d3').slideUp(5000);
		})
//////Slide Down ////////
		$('#b6').click(function(){
		$('#d3').slideDown(5000);
		})
////////////////
})
</script>