Demo of Fadein & Fadeout Effects with slow fast and milli seconds using JQuery

CSS

<style>.msg1{ 
display:none;
position: relative;
FONT-SIZE: 12px;
font-family: Verdana;
padding:10px;
width:350px;
background-color: #ffffcc;
}</style>

HTML

<input type=button id=b1 value='FadeIn(fast)'><input type=button id=b2 value='FadeOut(fast)'></div>
 <div id=d1 class='msg1'>FadeIn or FadeOut this layer by using buttons</div>
<br><br>
<input type=button id=b3 value='FadeIn(slow)'><input type=button id=b4 value='FadeOut(slow)'></div>
<div id=d2 class='msg1'>FadeIn or FadeOut this layer by using buttons</div>
<br><br>
<input type=button id=b5 value='FadeIn(milli seconds)'><input type=button id=b6 value='FadeOut(milli seconds)'></div>
<div id=d3 class='msg1'>FadeIn or FadeOut this layer by using buttons</div>

jquery

<script>
$(document).ready(function() {
///// FadeIn Fast/// 
$('#b1').click(function(){
$('#d1').fadeIn('fast');
})
//////FadeOut Fast ////////
$('#b2').click(function(){
$('#d1').fadeOut('fast');
})
////////////////
///// FadeIn slow/// 
$('#b3').click(function(){
$('#d2').fadeIn('slow');
})
//////FadeOut slow ////////
$('#b4').click(function(){
$('#d2').fadeOut('slow');
})
////////////////
///// FadeIn Milli seconds/// 
$('#b5').click(function(){
$('#d3').fadeIn(5000);
})
//////FadeOut Mill Seconds ////////
$('#b6').click(function(){
$('#d3').fadeOut(5000);
})
////////////////
})
</script>