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. Create the following page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/effectPuff.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery UI Puff Effect</title> </head> <body> <img id="loading" alt="Loading" src="img/effects/loading.gif"> <script type="text/javascript...