In this article, we will demonstrate the effect of Fade by using a JavaScript library called script.aculo.us. The fade effect offers a smooth fading transition to the element. We can also adjust the duration of this effect as well.
Syntax:
Effect.Fade('element_id');
// or
Effect.Fade('element_id', options );
Options:
- duration: Duration taken to fade the element, defaults to 1.0.
- from: It is a float value representing the percent of opacity to start, the default value is 0.0.
- to: It is a float value representing the percent of opacity to end, the default value is 1.0.
Note: To use this library, we are supposed to install the library and then use it in our programs. And to do so, you can follow this link http://script.aculo.us/downloads.
Example 1: To demonstrate the use of this function, we have written a small piece of code. In which we have written a small JavaScript function named ShowEffect method which uses the Fade method of this library. By clicking on Click me to Fade the line! , you will see the effect clearly.
To see the effect, first install the library and then open this program in the local environment.
HTML
<!DOCTYPE html> <html>   <head>     <script type="text/javascript"         src="prototype.js">     </script>           <script type="text/javascript"         src="scriptaculous.js?load = effects,controls">     </script>           <script type="text/javascript">         function ShowAction(element) {             new Effect.Fade(element,             { duration: 1, from: 0, to: 1.0 });         }     </script> </head>   <body>     <div onclick="ShowAction('hideshow')">         <button type="button">             Click me to Fade the line!         </button>     </div>     <br><br>       <div id="hideshow">         LINE TO FADE     </div> </body>   </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html>   <head>     <script type="text/javascript"         src="prototype.js">     </script>           <script type="text/javascript"     src="scriptaculous.js?load = effects,controls">     </script>           <script type="text/javascript">         function ShowEffect(element) {             new Effect.Fade(element,             { duration: 2, from: 0, to: 1.0 });         }     </script> </head>   <body>     <div onclick="ShowEffect('neveropen_1')">         <button type="button">             Click me to ShowEffect!         </button>     </div>     <br><br>       <div id="neveropen_1">         <div style="width: 10%; height: 10%;             background-color: green;">             Geeks For Geeks         </div>     </div> </body>   </html> |
Output:
