Copyright © tutorialspoint.com

script.aculo.us toggle Effects Utility

previous next


Advertisements

Description:

The Effect.toggle allows to toggle you between hide and show, slide up and slide down, and blind up and blind down.

For example, this checks if element is in hide state then it will show that element.

This utility function is most useful in scripts where the current state of the element is unknown or moot, and toggling the element to the opposite state is all that matters.

Syntax:

You can syntax form to use this effect:

Effect.toggle( element, [effectType], [options] );

Where effectType is one of the strings:

If the effectType is omitted, the default is appear

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 AppearEffect(element){
       new Effect.toggle(element, 'Appear', {duration:3});
   }
   function BUDEffect(element){
       new Effect.toggle(element,'Blind', {duration:3});
   }
   function SUDEffect(element){
       new Effect.toggle(element,'Slide', {duration:3});
   }

   </script>
</head>
<body>

<div onclick="AppearEffect('myimage')">
    Click me to hide and show the image
</div>
<br />

<div onclick="BUDEffect('myimage')">
    Click me to Blind Up and Blind Down the image
</div>
<br />

<div onclick="SUDEffect('myimage')">
    Click me to Slide Up and Slide Down the image
</div>
<br />

<div id="myimage" onclick="AppearEffect(this);">
    <img src="/images/scriptaculous.gif" alt="script.aculo.us" />
</div>

</body>
</html>

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


previous next

Copyright © tutorialspoint.com