Tutorials Point


  Learn script.aculo.us
  script.aculo.us Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

script.aculo.us Parallel Effects


previous next AddThis Social Bookmark Button


Advertisements

Description:

This is a special effect to allow 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 subeffects.

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 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 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.

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



previous next Printer Friendly

Advertisements


  

Advertisements