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

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.


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.


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");
        node: "basicNode1",
        duration: 2000
        node: "basicNode2",
        duration: 2000
<button type="button" id="basicButton">Fade and Wipe in Nodes!!</button>
<div id="basicNode1" style="width: 100px; height: 100px; background-color: red;"></div>
<div id="basicNode2" style="width: 100px; background-color: green; display: none;">
  <b>Some random text in a node to wipe in.</b>

See Also

Error in the documentation? Can’t find what you are looking for? Let us know!