Demo of Jquery Explode UI effects

CSS

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

HTML

<input type=button id=b1 value='explode 5000ms'>
<input type=button id=b2 value='explode fast'>
<input type=button id=b3 value='explode slow'>
<br>
Explode 500ms  will end with callback function to show alert window.<br><br>
<input type=button id=b4 value='Explode Default'>
<input type=button id=b5 value='Explode 20 Pieces (5000 ms)'>
<input type=button id=b6 value='Explode 4 Pieces (slow)'>

jquery

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

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

$('#b4').click(function(){
$( "#d1" ).effect( "explode");
})
////////////////////

$('#b5').click(function(){
$( "#d1" ).effect( "explode",{pieces: 20},5000);
})

$('#b6').click(function(){
$( "#d1" ).effect( "explode",{pieces: 4},'slow');
})

})
</script>