script.aculo.us Grow Effect

Last Updated : 12 May, 2021

The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. In this article, we will demonstrate the Grow effect. This effect is used for making the element grow with a smooth transition from a direction. We can adjust the duration of the effect as well.

Syntax:

Effect.Grow( 'id_of_element', [options] )

Effect.Grow( element, [options] )

Options: This options object has two values as mentioned above and described below:

direction: This value specifies the origin from where the element grows. The values can be ‘top-left’, ‘top-right’, ‘bottom-left’ or ‘bottom-right’. The default value is ‘center’.
duration: This value specifies the duration of the effect in seconds. The default value is 1 second.

To demonstrate the use of this function, we have written a small piece of code. In which we have written a small JavaScript function named ShowEffect method which uses the Grow method of this library. The examples below demonstrate the method.

Example 1:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script type="text/javascript"
        src="prototype.js">
    </script>
 
    <script type="text/javascript"
        src="scriptaculous.js">
    </script>
 
    <script type="text/javascript">
        function ShowEffect(element) {
 
            // Using the Effect.Grow() method
            // on the element with no options
            new Effect.Grow(element);
        }
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h2>script.aculo.us Grow Effect</h2>
     
    <button onclick="ShowEffect('geeks_1')">
        Click to Show the Effect
    </button>
    <br />
    <br />
 
    <div id="geeks_1">
        <div style="background-color: lightgreen;">
            GeeksforGeeks
        </div>
    </div>
</body>
 
</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script type="text/javascript"
        src="prototype.js">
    </script>
 
    <script type="text/javascript"
        src="scriptaculous.js">
    </script>
 
    <script type="text/javascript">
        function ShowEffect(element) {
 
            // Using the Effect.Grow() method
            // on the element with the direction
            // and duration specified
            new Effect.Grow(element, {
                direction: 'top-left',
                duration: 5
            });
        }
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h2>script.aculo.us Grow Effect</h2>
     
    <button onclick="ShowEffect('hideshow')">
        Click to Show the Effect
    </button>
    <br />
    <br />
    <div id="hideshow">
        LINE TO GROW
    </div>
</body>
 
</html>