Open In App

script.aculo.us Opacity Effect

Improve
Improve
Like Article
Like
Save
Share
Report

The script.aculo.us Opacity effect is one of the core effects which allows us to gradually change an element’s opacity to a given level. This effect starts with the element’s current opacity unless the ‘from’ option is defined and ends with an opacity defined by the ‘to’ option, the default opacity value is 1.0.

Syntax:

new Effect.Opacity('id_of_element', [options]);

Example 1: This example shows how to change the opacity to Show or Hide the Content.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" 
        src="./javascript/prototype.js">
    </script>
      
    <script type="text/javascript" 
src="./javascript/scriptaculous.js?load = effects">
    </script>
      
    <script type="text/javascript">
        function ShowElement(element) {
            new Effect.Opacity(element, { 
                duration: 1, from: 0, to: 1.0 });
        }
  
        function HideElement(element) {
            new Effect.Opacity(element, { 
                duration: 1, from: 1.0, to: 0 });
        }
    </script>
</head>
  
<body>
    <div onclick="ShowElement('element')">
        <Button>Show Content</Button>
    </div>
    <br />
  
    <div onclick="HideElement('element')">
        <Button>Hide Content</Button>
    </div>
    <br />
    <img id="element" src="./gfg.png">
</body>
  
</html>


Output:

Out

Example 2: Changing the Opacity of the Content.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" 
        src="./javascript/prototype.js">
    </script>
      
    <script type="text/javascript" 
src="./javascript/scriptaculous.js?load = effects">
    </script>
      
    <script type="text/javascript">
        function ShowElement(element) {
            new Effect.Opacity(element, { 
                duration: 1.5, from: 0.5, to: 1.0 });
        }
  
        function HideElement(element) {
            new Effect.Opacity(element, { 
                duration: 1.5, from: 1.0, to: 0.3 });
        }
    </script>
</head>
  
<body>
    <div onclick="ShowElement('element')">
        <Button>Show Content</Button>
    </div>
    <br />
  
    <div onclick="HideElement('element')">
        <Button>Fade Content</Button>
    </div>
    <br />
    <img id="element" src="./gfg.png">
</body>
  
</html>


Output:

Output



Last Updated : 20 Nov, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads