Tutorials Point


  Learn script.aculo.us
  script.aculo.us Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

script.aculo.us DropOut Effects


previous next AddThis Social Bookmark Button


Advertisements

Description:

The DropOut effect combines 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 common parameters.

Example:

<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>

To understand it in better way you can Try it yourself.



previous next Printer Friendly

Advertisements


  

Advertisements