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