Web | This Site

Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# script.aculo.us Puff Effects

## 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 common parameters.

## Example:

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

To understand it in better way you can Try it yourself.

Advertisement

Online Image Processing

Indian Baby Names