script.aculo.us Multiple Effect

Last Updated : 20 Nov, 2020

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 Multiple effect. This effect is used for applying the given effect to multiple elements on the page. We can adjust the speed and delay of the effects as well.

Syntax:

Effect.multiple( [element1, element2, element3, …], Effect, [options] )

Effect.multiple( element, Effect, [options] )

Options: This method has two parameters in the options object as described below:

speed: It is a float value that specifies the delay offset for each effect in the list of effects. The default value is 0.1 seconds.
delay: It is a float value that specifies the start delay of this effect. The default value is 0.0 seconds.

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 Multiple method of this library. The examples below demonstrate the method.

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" 
        src="prototype.js"> 
    </script> 
  
    <script type="text/javascript" 
        src="scriptaculous.js"> 
    </script> 
  
    <script type="text/javascript"> 
        function ShowEffect(element) { 
  
            // Using the multiple effect with 
            // the delay parameter 
            new Effect.multiple(element, 
                Effect.Fade, { 
                delay: 3.0 
            }); 
        } 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2>script.aculo.us Multiple Effect</h2> 
      
    <button onclick="ShowEffect( 
        ['geeks_1', 'geeks_2'])"> 
        Click me to multiple  
        fade the lines! 
    </button> 
  
    <br><br> 
    <div id="geeks_1"> 
        LINE ONE TO FADE 
    </div><br> 
    <div id="geeks_2"> 
        LINE TWO 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"> 
    </script> 
  
    <script type="text/javascript"> 
  
        // Using the multiple effect with 
        // the speed parameter 
        function ShowEffect(element) { 
            new Effect.multiple(element, 
                Effect.SwitchOff, { 
                speed: 1.0 
            }); 
        } 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2>script.aculo.us Multiple Effect</h2> 
      
    <button onclick="ShowEffect( 
        ['geeks_1', 'geeks_2', 'geeks_3'])"> 
        Click me to multiple fade the lines 
    </button> 
  
    <br><br> 
    <div id="geeks_1"> 
        <div style="background-color: lightgreen;"> 
            GeeksforGeeks 
        </div> 
    </div><br> 
    <div id="geeks_2"> 
        <div style="background-color: orange;"> 
            GeeksforGeeks 
        </div> 
    </div><br> 
    <div id="geeks_3"> 
        <div style="background-color: lightblue;"> 
            GeeksforGeeks 
        </div> 
    </div> 
</body> 
  
</html> 