script.aculo.us DropOut Effect

Last Updated : 23 Nov, 2020

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> 