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:
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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
