Demo of Jquery shake 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='Shake 5000ms'>
<input type=button id=b2 value='Shake fast'>
<input type=button id=b3 value='Shake slow'>
<br>
Shake 500ms  will end with callback function to show alert window.<br><br>
<input type=button id=b4 value='Shake Default'>

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

<input type=button id=b9 value='Shake Distance (200)'>
<input type=button id=b10 value='Shake Distance (10)'>

<input type=button id=b11 value='Shake Times (1)'>
<input type=button id=b12 value='Shake Times (5)'>

jquery

<script>
$(document).ready(function() {
$('#b1').click(function(){
$( "#d1" ).effect( "shake",{times:5,distance:200},5000,function(){
alert('This alert is created by using callback function once the effect is over');
} );
})
/////////
////////////////////
$('#b2').click(function(){
$( "#d1" ).effect( "shake",{times:4,distance:200},'fast' );
})

$('#b3').click(function(){
$( "#d1" ).effect( "shake",{times:3,distance:200},'slow' );
})

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

$('#b6').click(function(){
$( "#d1" ).effect( "shake",{direction: 'left',times:2},5000);
})

$('#b7').click(function(){
$( "#d1" ).effect( "shake",{direction: 'up',times:2},'slow');
})

$('#b8').click(function(){
$( "#d1" ).effect( "shake",{direction: 'down',times:2},'slow');
})

$('#b9').click(function(){
$( "#d1" ).effect( "shake",{direction: 'right',times:2,distance:200},'slow');
})

$('#b10').click(function(){
$( "#d1" ).effect( "shake",{direction: 'right',times:2,distance:10},'slow');
})


$('#b11').click(function(){
$( "#d1" ).effect( "shake",{times:1,distance:200},'slow');
})

$('#b12').click(function(){
$( "#d1" ).effect( "shake",{times:5,distance:200},'slow');
})


})
</script>