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.
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...
