Core Effects > Effect.Parallel

This is a special effect which allows 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.


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


new Effect.Parallel([
  new Effect.Move(element, { sync: true, x: 20, y: -30, mode: 'relative' }), 
  new Effect.Opacity(element, { sync: true, from: 1, to: 0 }) 
], { 
  duration: 0.8,
  delay: 0.5


Option Description
sync boolean, has to be true in order to prevent the subeffects from being started as soon as they get instantiated.


Don’t forget to set the sync option to true for all of the subeffects or else all the effects will start immediately after they were instantiated.

For IE7 and IE8 don’t put an extra comma at the end of the array of effects.
i.e. new Effect.Parallel([new Effect.Fade(), new Effect.Appear(), ]);
The extra comma at the end will cause the effect to fail in IE7-IE8 on the first pass.


Source code of the demo

<div id="parallel_demo" style="width:150px; height:40px; background:#ccc;"></div>
  <li><a href="#" id="animate_parallel_demo">Click here for a demo!</a></li>
  <li><a href="#" id="reset_parallel_demo">Reset</a></li>

<script type="text/javascript">
$('animate_parallel_demo').observe('click', function(event) {
  new Effect.Parallel([
    new Effect.Move('parallel_demo', { sync: true, x: 400, y: 0, mode: 'relative' }), 
    new Effect.Opacity('parallel_demo', { sync: true, from: 1, to: 0 })
  ], { 
    duration: 1.5

$('reset_parallel_demo').observe('click', function(event) {
    top: 0,
    left: 0,
    opacity: 1