Demo of Jquery size UI effects
Apply Size effects by clicking the buttons
Apply Size effects by clicking the buttons
Apply Size effects by clicking the buttons
Apply Size effects by clicking the buttons
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>