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 supposed to download the library and then use it in our programs. And to do so you can follow the this link http://script.aculo.us/downloads.
Demonstration: To demonstrate the use of this function, we have written a small piece of code. We have written a small JavaScript function ShowEffect() method which uses SwitchOff() method of this library. By clicking on Click me to SwitchOff the line!, you will see the effect clearly.
Example: To see the effect first include the library files in the code and then open this program in local environment.
HTML
<html> <head> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src="scriptaculous.js?load = effects"> </script> <script type="text/javascript"> function ShowEffect(element) { new Effect.SwitchOff(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 me to display the image! </div> <br /> <div id="hideshow" onclick="ShowEffect(this);"> <img src="GEEKSIMAGES/neveropen1.PNG" alt="" /><br /> Click me to switch me off. </div> </body> </html> |
Output:
