The Effect.DropOut() method of script.aculo.us is used for removing and showing element from the DOM simulating a drop down effect. The core effects, Effect.MoveBy() and effect.Opacity() are combined to make the DroupOut effect. It can be implemented along with Effect.Appear() to drop the element and then show it again.
Syntax:
new Effect.DropOut(element_id, {options});
This effect does not require any specific parameters. The common parameters of visual effect 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.DropOut(element, { duration: 3 }); Â Â Â Â Â Â Â Â } Â Â Â Â Â Â </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="GEEKSIMAGES/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!
