forked from madrobby/scriptaculous
-
Notifications
You must be signed in to change notification settings - Fork 0
Effect.Parallel
joe-loco edited this page Sep 12, 2010
·
9 revisions
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.
<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>