script.aculo.us Opacity Effect

Last Updated : 20 Nov, 2020

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> 