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


previous next AddThis Social Bookmark Button


Advertisements

Description:

This effect simulates a window blind, where the contents of the affected elements scroll up.

Syntax:

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

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

 OR

 new Effect.SlideUp(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 SUEffect(element){
       new Effect.SlideUp(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="SUEffect(this);">
    <img src="/images/scriptaculous.gif" alt="script.aculo.us" />
    <h2>Click me to Slide Up the Image</h2>
</div>

</body>
</html>

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



previous next Printer Friendly

Advertisements


  

Advertisements