jQuery 1.4 Animation Techniques - Index of

Time for action – exploding an element
In this example we will make an image explode.
1. Just add the following simple image to the of the template file:
[ 163 ]
Chapter 6
2. Then add the following equally simple code to the empty function at the bottom of
the template file:
$("img").click(function() {
$(this).effect("explode");
});
3. Save this page as explode.html.
4. 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 to do is attach a click handler directly to the image which applies
the explode effect using the effect() method. No configuration in this instance is required
because the default mode of the effect is hide.
Note that we can also run this effect in reverse by setting the mode option to show, or using
the show() logic instead. In this scenario, we will see the target element constructed from a
series of pieces that fade in and fly together—an explosion in reverse.