The explosion effect is truly awesome. The targeted element is literally exploded into a specified number of pieces, before disappearing completely. It's an easy effect to use and has few configuration properties, but the visual impact of this effect is huge, giving you a lot of effect in return for very little code. Let's see a basic example.
Create the following new page:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Explode</title>
<link rel="stylesheet" href="development-bundle/themes/redmond/jquery.ui.all.css">
<style>
body { width: 200px; margin-left: auto; margin-right: auto; }
</style>
<script src="js/jquery-2.0.3.js"></script>
<script src="development-bundle/ui/jquery.ui.effect.js"></script>
<script src="development-bundle/ui/jquery.ui.effect-explode.js"></script>
</head>
<script>
$(document...