script.aculo.us SlideUp Effect

script.aculo.us SlideDown Effect

Last Updated : 20 Nov, 2020

In this article we will demonstrate the effect of SlideDown by using JavaScript library called script.aculo.us having smooth transition from one to another. We can adjust the duration of the effect as well.

Syntax :

Effect.SlideDown('id_of_element');

Effect.SlideDown('id_of_element', { duration: 3.0 });

Note: To use this library we are suppose to install or download the library and then use it in our programs. And to do so you can follow the link http://script.aculo.us/downloads.

Approach:

To demonstrate the use of this function we have written a small piece of code. We have written a small JavaScript function named ShowEffect() method which uses SlideDown() method of this library. By clicking on Click the image to SlideDown!, you will see the effect clearly.

Example: To see the effect first install the library and then open this program in local environment.

HTML

<html>
   <head>    

      <script type = "text/javascript" 
       src="scriptaculous-js-1.9.0/lib/prototype.js">
      </script>
      <script type = "text/javascript" 
       src="scriptaculous-js-1.9.0/src/scriptaculous.js?load = effects">
      </script>
        
      <script type = "text/javascript">
      
           function ShowEffect(element){
            new Effect.SlideDown(element, { duration: 3.0 });
         }
            function displayImage(element){
            new Effect.Appear(element,{duration:1, from:1.1, to:1.2});
         }
      </script>
   </head>
   
   <body>
     
        <div onclick = "displayImage('hideshow')">
            Click the image to SlideDown!
        </div>
        <br/>
         
        <div id="hideshow" onclick = "ShowEffect(this);">
           <img src = "GEEKSIMAGES/geeks1.PNG" alt = ""  /><br/>
            Image to Slidedown
        </div>
   </body>
</html>

Output:

script.aculo.us SlideUp Effect

J

Jitender_1998

Improve

Article Tags :

Similar Reads

script.aculo.us SlideUp Effect

In this article, we will demonstrate the visual effect of SlideUp option by using JavaScript library called script.aculo.us having smooth transition from one to another. We can adjust the duration of the effect as well. Syntax : Effect.SlideUp('id_of_element'); or Effect.SlideUp('id_of_element', { d

script.aculo.us Shrink Effect

In this article, we will demonstrate the effect of Shrink by using a JavaScript library called script.aculo.us shrinking an element into a particular direction and hiding when the effect is complete. We can adjust the duration of the effect as well. Syntax: Effect.Shrink('id_of_element'); // or Effe

script.aculo.us ScrollTo Effect

In this article, we will demonstrate the effect of ScrollTo by using JavaScript library called script.aculo.us having smooth transition from one to another. We can adjust the duration of the effect as well. Syntax: Effect.ScrollTo('element_id', { duration:'0.2', offset:-20 }); Note: To use this libr

script.aculo.us Shake Effect

This effect falls under JavaScript's UI library called script.aculo.us. script.aculo.us is a JavaScript library built on the Prototype JavaScript Framework. This library gives us dynamic visual effects with the help of the Document Object Model (DOM). Now let's learn specifically about script.aculo.

script.aculo.us Squish Effect

In this article, we will demonstrate the Squish effect by using a JavaScript library called script.aculo.us having a smooth scaling down of the size with the left corner remaining stationary. We can adjust the duration of the effect as well. Syntax: Effect.Squish('id_of_element'); // Or Effect.Squis

script.aculo.us SwitchOff Effect

In this article, we will demonstrate the visual effect of SwitchOff option by using JavaScript library called script.aculo.us having smooth transition from one to another. We can adjust the duration of the effect as well. Syntax: Effect.SwitchOff('id_of_element'); Note: To use this library, we are s

script.aculo.us Slider

A slider is a kind of small track, along which you can slide a handle. It translates into a numerical value. With script.aculo.us's slider module, you can create sliders with plenty of control. Syntax: new Control.Slider( handle, track, {options} ); Slider Options: Options Description Axis Can be us

script.aculo.us tagifyText Effect

In this article we will demonstrate the effect of tagifyText by using javascript library called script.aculo.us having smooth transition from one to another. We can adjust the duration of the effect as well. Syntax: Effect.tagifyText(element); Note: To use this library we are suppose to install the

script.aculo.us Move Effect

The script.aculo.us libraryÂ is a cross-browser library that aims to improving the user interface of a website. In this article, we will demonstrate the Move effect. This effect is used for making the element smoothly move to the given parameters. We can adjust the duration of the effect as well. Syn

script.aculo.us Fold Effect

In this article, we will demonstrate the effect of Fold by using a JavaScript library called script.aculo.us having a smooth scaling down first in the vertical direction and then horizontal toward the left to finally disappear. We can adjust the duration of the effect as well. Syntax: Effect.Fold('i