script.aculo.us Grow Effect
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;"> zambiatek </h1> <h2>script.aculo.us Grow Effect</h2> <button onclick="ShowEffect('zambiatek_1')"> Click to Show the Effect </button> <br /> <br /> <div id="zambiatek_1"> <div style="background-color: lightgreen;"> zambiatek </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;"> zambiatek </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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
