script.aculo.us - Puff Effect

Description

The Puff effect is a combination of the Opacity and Scale effects that causes the element to be removed from the document flow, and then to grow from its center while fading away into invisibility.

The net effect is that the element appears to get blown off the page in a puff of smoke.

Syntax

You can use one of the following two forms to use this effect −

new Effect.Puff('id_of_element', [options]);
OR
new Effect.Puff(element, [options]);

Effect-Specific Parameters

This effect does not have any other parameter except the common parameters.

Example

Live Demo

<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects" ></script>

      <script type = "text/javascript">
         function PuffEffect(element){
            new Effect.Puff(element, {duration:3});
         }

         function ShowImage(element){
            new Effect.Appear(element,{duration:1, from:1, to:1.0});
         }
      </script>
   </head>
   
   <body>
      <div onclick = "ShowImage('myimage')">
         Click me to display the image
      </div>
      <br />
		
      <div id = "myimage" onclick="PuffEffect(this);">
         <img src = "/images/scriptaculous.gif" alt = "script.aculo.us" />
         <h2>Click me to Puff me out</h2>
      </div>
   </body>
</html>

This will produce following result −

scriptaculous_effects.htm