Creating a puff effect

Similar to the explode effect, but slightly more subtle is the puff effect, which causes an element to grow slightly before fading away. Like explode, there are few configuration options to concern ourselves with.

Consider a page that has AJAX operations occurring on it. It's useful to provide a loading image that shows the visitor that something is happening. Instead of just hiding an image like this when the operation has completed, we can puff it out of existence instead.

Remove the <p> element and change the <img> element from the previous example, so that it points to a new image:

<img id="loader" src="img/ajax-loader.gif">

Then change the effect's source file to the scale effect:

<script src="development-bundle/ui/jquery.ui.effect-scale.js">
</script>

Finally, change the last <script> element, so that it appears as follows:

<script>
  $(document).ready(function($){
    $("#loader").click(function() {
      $(this).hide("puff...