Demo of fadeTo Effects using JQuery

CSS

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

HTML

<input type=button id=b1 value='FadeTo'> <input type=button id=b2 value='Restore'></div>
<div class="col-md-4"><div id=d1 class='msg'>FadeTo test this layer by using buttons</div>

<input type=button id=b3 value='FadeTo(slow)'> <input type=button id=b4 value='Restore(slow)'>
<div id=d2 class='msg'>FadeTo test this layer by using buttons</div>

<input type=button id=b5 value='FadeTo(milli Seconds)'> <input type=button id=b6 value='Restore(milli Seconds)'>
<div id=d3 class='msg'>FadeTo test this layer by using buttons</div>

jquery

<script>
$(document).ready(function() {
///// Fade 
$('#b1').click(function(){
$('#d1').fadeTo('fast',0.3);
})
//////Restore  ////////
$('#b2').click(function(){
$('#d1').fadeTo('fast',1.0);
})////////////////
///// Fade - slow //
$('#b3').click(function(){
$('#d2').fadeTo('slow',0.3);
})
//////Restore  ////////
$('#b4').click(function(){
$('#d2').fadeTo('slow',1.0);
})////////////////
///// Fade -milli seconds //// 
$('#b5').click(function(){
$('#d3').fadeTo(5000,0.3);
})
//////Restore  ////////
$('#b6').click(function(){
$('#d3').fadeTo(5000,1.0);
})
////////////////
})
</script>