script.aculo.us - Parallel Effect

Description

This is a special effect to combine more than one core effect into a parallel effect. It's the only effect that doesn't take an element as first parameter, but an array of sub-effects.

Syntax

You can use one of the following two forms to use this effect −

new Effect.Parallel([array of subeffects], [options]);

Effect-Specific Parameters

This effect does not have any specific parameter except the common parameters.

Example

Live Demo

<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 ParallelEffect(element){
            new Effect.Parallel(
            [
               new Effect.MoveBy(element, 100, 200, { sync: true }),
               new Effect.Scale(element, 200, { sync: true })
            ],
            {duration: 2}
            );
         }
      </script>
   </head>
   
   <body>
      <div onclick = "ParallelEffect(this)">
         Click me to see the result of Parallel Method
      </div>	
   </body>
</html>

You specify the effects as a first argument to the constructor, passing in an array of the effects to be run synchronously. Those effect objects must have been created with their sync option set to true.

Note that the effects do not necessarily pertain to the same element; however, there is only one duration (or fps rate, for that matter) - the one set at the Effect.Parallel level; synchronized effects will all step ahead in unison.

This will produce following result −

scriptaculous_effects.htm