Skip to content
Related Articles

Related Articles

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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :