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::chain() is a helper function that can take a list of dojo/_base/fx::Animation objects and combine them so that their effects run sequentially. With this function animations that affect multiple nodes can be generated and executed with a single call.


To use dojo/fx::chain() 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.chain([animA, animB]).play();

.chain() returns another instance of Animation that can be used to control the chained Animation.


This example fades and wipes in two DOM nodes sequentially.

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>
<br />
<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!