Effect.Parallel

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.

Syntax


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

Examples


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
});

Options

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

Notes

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.

Demo

Source code of the demo


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

<script type="text/javascript">
$('animate_parallel_demo').observe('click', function(event) {
  event.stop();
  
  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) {
  event.stop();
  
  $('parallel_demo').setStyle({
    top: 0,
    left: 0,
    opacity: 1
  });
});
</script>

script.aculo.us