script.aculo.us - DropOut Effect

Description

The DropOut effect combines the core effects to remove an element from the document flow in an animated fashion.

In this case, the Opacity and MoveBy core effects are combined to make it look as if the element drops off the page towards the floor.

Syntax

You can use one of the following two forms to use this effect −

new Effect.DropOut('id_of_element', [options]);
OR
new Effect.DropOut(element, [options]);

Effect-Specific Parameters

This effect does not have any other parameter except the common parameters.

Example

Live Demo

<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <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 DropOutEffect(element){
            new Effect.DropOut(element, {duration:3});
         }

         function ShowImage(element){
            new Effect.Appear(element,{duration:1, from:1, to:1.0});
         }
      </script>
   </head>

   <body>	
      <div onclick = "ShowImage('myimage')">
         Click me to display the image
      </div>
      <br />

      <div id = "myimage" onclick = "DropOutEffect(this);">
         <img src = "/images/scriptaculous.gif" alt = "script.aculo.us" />
         <h2>Click me to Drop me out</h2>
      </div>
   </body>
</html>

This will produce following result −

scriptaculous_effects.htm