Demo of Show Hide Effects with slow , fast & milli seconds delay using JQuery
CSS
<style>
.msg{
position: relative;
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='Show(slow)'><input type=button id=b2 value='Hide(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='Show(fast)'><input type=button id=b4 value='Hide(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='Show(fast)'><input type=button id=b6 value='Hide(fast)'></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() {
///// show ///
$('#b1').click(function(){
$('#d1').show('slow');
})
//////Hide ////////
$('#b2').click(function(){
$('#d1').hide('slow');
})
////////////////
///// show ///
$('#b3').click(function(){
$('#d2').show('fast');
})
//////Hide ////////
$('#b4').click(function(){
$('#d2').hide('fast');
})
////////////////
///// show ///
$('#b5').click(function(){
$('#d3').show(5000 mSec);
})
//////Hide ////////
$('#b6').click(function(){
$('#d3').hide(5000 mSec);
})
////////////////
})
</script>