Skip to content
Related Articles

Related Articles

Improve Article

script.aculo.us Fade Effect

  • Last Updated : 23 Nov, 2020

In this article, we will demonstrate the effect of Fade by using a JavaScript library called script.aculo.us. The fade effect offers a smooth fading transition to the element. We can also adjust the duration of this effect as well.

Syntax:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Effect.Fade('element_id');

// or

Effect.Fade('element_id', options );

Options:



  • duration: Duration taken to fade the element, defaults to 1.0.
  • from: It is a float value representing the percent of opacity to start, the default value is 0.0.
  • to: It is a float value representing the percent of opacity to end, the default value is 1.0.

Note: To use this library, we are supposed to install the library and then use it in our programs. And to do so, you can follow this link http://script.aculo.us/downloads.

Example 1: 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 Fade method of this library. By clicking on Click me to Fade the line! , you will see the effect clearly.

To see the effect, first install the library and then open this program in the local environment.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" 
        src="prototype.js">
    </script>
      
    <script type="text/javascript" 
        src="scriptaculous.js?load = effects,controls">
    </script>
      
    <script type="text/javascript">
        function ShowAction(element) {
            new Effect.Fade(element, 
            { duration: 1, from: 0, to: 1.0 });
        }
    </script>
</head>
  
<body>
    <div onclick="ShowAction('hideshow')">
        <button type="button">
            Click me to Fade the line!
        </button>
    </div>
    <br><br>
  
    <div id="hideshow">
        LINE TO FADE
    </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?load = effects,controls">
    </script>
      
    <script type="text/javascript">
        function ShowEffect(element) {
            new Effect.Fade(element, 
            { duration: 2, from: 0, to: 1.0 });
        }
    </script>
</head>
  
<body>
    <div onclick="ShowEffect('geeks_1')">
        <button type="button">
            Click me to ShowEffect!
        </button>
    </div>
    <br><br>
  
    <div id="geeks_1">
        <div style="width: 10%; height: 10%; 
            background-color: green;">
            Geeks For Geeks
        </div>
    </div>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :