Demo of Jquery size UI effects

CSS

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

HTML

<input type=button id=b1 value='Size 5000ms'>
<input type=button id=b2 value='Size fast'>
<input type=button id=b3 value='Size slow'>

<input type=button id=b4 value='Size Default'>

<input type=button id=b5 value='Size Origin'>
<input type=button id=b6 value='Size To (width:400, height:150)'>
<input type=button id=b7 value='Size content'>
<input type=button id=b8 value='Size box '>

jquery

<script>
$(document).ready(function() {
$('#b1').click(function(){
$( "#d1" ).toggle( "size",5000,function(){
alert('This alert is created by using callback function once the toggle is over');
});
})
/////////
////////////////////
$('#b2').click(function(){
$( "#d1" ).toggle( "size",'fast' );
})

$('#b3').click(function(){
$( "#d1" ).toggle( "size",'slow' );
})

$('#b4').click(function(){
$( "#d1" ).toggle( "size");
})
////////////////////

$('#b5').click(function(){
$( "#d1" ).toggle( "size",{origin: ['middle','center']});
})

$('#b6').click(function(){
$( "#d1" ).toggle( "size",{to:{width:400,height:150}},'slow');
})

$('#b7').click(function(){
$( "#d1" ).toggle( "size",{scale: 'content'},5000);
})
$('#b8').click(function(){
$( "#d1" ).toggle( "size",{scale: 'box'},5000);
})


})
</script>