script.aculo.us Fade Effect

The script.aculo.us Effect.fade() method can be used to fade away from the DOM. The Effect.Fade() can be used with Effect.Appear() method to fade away the content and then show it again.

Syntax:

new Effect.Fade(id_of_element, [options]);

This effect does not have any specific parameters. The common parameters of the visual effects module can be used.

Example:

<!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 ShowElement(element) { 
            new Effect.Appear(element,  
                { duration: 1 }); 
        } 
  
        function HideElement(element) { 
            new Effect.Fade(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="BeginnerIMAGES/gfg.png"> 
</body> 
  
</html> 

Output:

Tags:

#script.aculo.us #Technical Scripter 2020 #JavaScript #Technical Scripter #Web Technologies

script.aculo.us Fade Effect

script.aculo.us Fade Effect

Contact Us