- script.aculo.us Tutorial
- script.aculo.us - Home
- script.aculo.us - Overview
- script.aculo.us - Modules
- script.aculo.us - Visual Effects
- script.aculo.us - Drag & Drop
- script.aculo.us - Sorting Elements
- script.aculo.us - Create Sliders
- script.aculo.us - Auto Completion
- script.aculo.us - In-Place Editing
- script.aculo.us Resources
- script.aculo.us - Quick Guide
- script.aculo.us - Resources
- script.aculo.us - Discussion
script.aculo.us - Fold Effect
Description
The Fold effect is similar to the Squish effect except that the scaling is performed serially, first in the vertical direction, then horizontally, giving the illusion that the element is being folded up, then over.
Syntax
You can use one of the following two forms to use this effect −
new Effect.Fold('id_of_element', [options]); OR new Effect.Fold(element, [options]);
Effect-Specific Parameters
This effect does not have any other parameter except the 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 FoldEffect(element){ new Effect.Fold(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 = "FoldEffect(this);"> <img src = "/images/scriptaculous.gif" alt = "script.aculo.us" /> <h2>Click me to Fold me out</h2> </div> </body> </html>
This will produce following result −
scriptaculous_effects.htm
Advertisements