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


previous next AddThis Social Bookmark Button


Advertisements

Description:

This effect gradually changes an element's opacity to a given level. You can use this element to show or hide any element.

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, defaulting to 1.0.

Syntax:

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

 new Effect.Opacity('id_of_element', [options]);

 OR

 new Effect.Opacity(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 ShowEffect(element){
       new Effect.Opacity(element, 
       {duration:1, from:0, to:1.0});
   }
   function HideEffect(element){
       new Effect.Opacity(element, 
       {duration:1, from:1.0, to:0});
   }

   </script>
</head>
<body>
<div onclick="ShowEffect('hideshow')">
    Click me to see  the line!
</div>
<br />
<div onclick="HideEffect('hideshow')">
    Click me to hide  the line!
</div>
<br />
<div id="hideshow">
    LINE TO HIDE AND TO SHOW
</div>

</body>
</html>

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



previous next Printer Friendly

Advertisements


  

Advertisements