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

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

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