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


previous next AddThis Social Bookmark Button


Advertisements

Description:

Makes an element fade away and takes it out of the document flow at the end of the effect by setting the CSS display property to none. Opposite of Effect.Appear

Syntax:

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

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

 OR

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

   </script>
</head>
<body>
<div onclick="FadeEffect('hideshow')">
    Click me to fade out the image
</div>
<br />
<div onclick="ShowEffect('hideshow')">
    Click me to display the image once again
</div>
<br />
<div id="hideshow">
    <img src="/images/scriptaculous.gif" alt="script.aculo.us" />
</div>

</body>
</html>

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



previous next Printer Friendly

Advertisements


  

Advertisements