Skip to content
Related Articles

Related Articles

script.aculo.us Grow Effect
  • Last Updated : 20 Nov, 2020

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

or

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

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :