This effect is a very special effect in that it groups other effects together and runs them concurrently. WHile this effect extends the base effect, the most important configuration property is the effects property that identifies the effects this parallel effect will manage. Other configuration properties are simply merged with the configurations of the managed effects as a convenience.
Syntax
new Y.Effects.Parallel({
node: "#node",
effects: [array of subeffects]
});
Example
new Y.Effects.Parallel([
new Y.Effects.Move({ node: "#node", managed: true, x: 20, y: -30, mode: "relative" }),
new Y.Effects.Opacity({ node: "#node", managed: true, from: 1, to: 0 })
], {
node: "#node",
duration: 0.8,
delay: 0.5
});
Configuration properties
| Properties |
Description |
| effects |
An array of effects that this parallel effect will managed. |
Notes
An important note about subeffects. Subeffects should have managed set to true. This will allow the parent parallel effect to enforce that they are executed at the proper time and that it can appropriately bind to the events of those effects.
Demo
Source code of this demo
<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>
<script type="text/javascript">
YUI({
modules: {
"gallery-effects": {
fullpath: "http://projects.sophomoredev.com/media/system/js/yui3-gallery/gallery-effects/gallery-effects.js",
requires: ["node", "anim", "async-queue", "base"]
}
}
}).use("gallery-effects", function (Y) {
Y.get("#animate_parallel_demo").on("click", function (event) {
new Y.Effects.Parallel({
effects: [
new Y.Effects.Move({ node: "#parallel_demo", managed: true, x: 400, y: 0, mode: "relative" }),
new Y.Effects.Opacity({ node: "#parallel_demo", managed: true, from: 1, to: 0 })
],
duration: 1.5,
node: "#parallel_demo"
});
event.halt();
});
Y.get("#reset_parallel_demo").on("click", function (event) {
Y.one("#parallel_demo").setStyles({
top: 0,
left: 0,
opacity: 1
});
event.halt();
});
});
</script>
