Demo of Jquery slide UI effects

CSS

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

HTML

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

<input type=button id=b5 value='Slide Right'>
<input type=button id=b6 value='Slide Left'><br><br>
<input type=button id=b7 value='Slide Up'>
<input type=button id=b8 value='Slide Down'>

<input type=button id=b9 value='Slide Distance (5)'>
<input type=button id=b10 value='Slide Distance ( 50)'>

jquery

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

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

$('#b4').click(function(){
$( "#d1" ).effect( "slide");
})
////////////////////
$('#b5').click(function(){
$( "#d1" ).effect( "slide",{direction: 'right'});
})

$('#b6').click(function(){
$( "#d1" ).effect( "slide",{direction: 'left'});
})

$('#b7').click(function(){
$( "#d1" ).effect( "slide",{direction: 'up'});
})

$('#b8').click(function(){
$( "#d1" ).effect( "slide",{direction: 'down'});
})
$('#b9').click(function(){
$( "#d1" ).effect( "slide",{distance: 5});
})

$('#b10').click(function(){
$( "#d1" ).effect( "slide",{distance: 50});

})


})
</script>