dojo/fx::combine()¶
| Authors: | Peter Higgins, Nikolai Onken, Marcus Reimann, Jared Jurkiewicz |
|---|---|
| Developers: | Bryan Forbes, Peter Higgins, Eugene Lazutkin, Bill Keese, Adam Peller, Alex Russell, Dylan Schiemann, sjmiles |
| since: | v1.0 |
Contents
dojo/fx::combine() is a helper function that can take a list of dojo/_base/fx::Animation objects and combine them so that their effects all run in parallel. With this function animations that affect multiple nodes can be generated and executed at the same time.
Usage¶
To use dojo/fx::combine() pass it an array of dojo/_base/fx::Animation objects:
require(["dojo/fx"], function(coreFx){
var animA = coreFx.wipeIn({
node: "someNode"
});
var animB = coreFx.wipeOut({
node: "someNode"
});
coreFx.combine([animA, animB]).play();
});
.combine() returns another instance of Animation that can be used to control the chained Animation.
Examples¶
This example fades and wipes in two DOM nodes at the same time.
require(["dojo/fx", "dojo/_base/fx", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!"],
function(coreFx, baseFx, dom, style, on){
style.set("basicNode1", "opacity", "0");
style.set("basicNode2", "height", "0px");
on(dom.byId("basicButton"), "click", function(){
style.set("basicNode1", "opacity", "0");
style.set("basicNode2", "height", "0px");
style.set("basicNode2", "display", "none");
coreFx.combine([
baseFx.fadeIn({
node: "basicNode1",
duration: 2000
}),
coreFx.wipeIn({
node: "basicNode2",
duration: 2000
})
]).play();
});
});
<button type="button" id="basicButton">Fade and Wipe in Nodes!!</button>
<div id="basicNode1" style="width: 100px; height: 100px; background-color: red;"></div>
<br>
<div id="basicNode2" style="width: 100px; background-color: green; display: none;">
<b>Some random text in a node to wipe in.</b>
</div>
See Also¶
- dojo/fx - Overview of the core Dojo FX API
- dojo/fx::chain() - A helper function that combines animations to run sequentially.
- dojo/_base/fx::animateProperty() - Details around the other options possible
- Animation Tutorial - The tutorial to find out about Dojo’s FX API