Time for action – exploding an element

In this example we will make an image explode.

Just add the following simple image to the <body> of the template file:
```
<img src="img/grenade.jpg" alt="Grenade">
```
Then add the following equally simple code to the empty function at the bottom of the template file:
```
$("img").click(function() {
  $(this).effect("explode");
});
```
Save this page as explode.html.
This example is so simple we don't even need a stylesheet. Once we click on the grenade, it is exploded into the default number of pieces:

The exploded element fades away as the individual pieces of the element move apart.

What just happened?

In the example, all we need ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.