dojo.fx.chain

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

The dojo.fx.chain() is a helper function that can take a list of dojo._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.

Function Parameters

The dojo.fx.chain() function takes a JavaScript array as its parameter. This array is a list of dojo._Animation objects you want to run sequentially.

Return Value

The return value from a call to dojo.fx.chain() is another instance of dojo._Animation. It can them be used as you would any other animation object, such as playing it, or combining it with other animation effects by passing it back to a dojo.fx.chain() call.

Examples

Example 1: Fade and Wipe in two DOM nodes sequentially

dojo.require("dijit.form.Button");
dojo.require("dojo.fx");
function basicChain(){
   dojo.style("basicNode1", "opacity", "0");
   dojo.style("basicNode2", "height", "0px");

   // Function linked to the button to trigger the fade.
   function chainIt(){
      dojo.style("basicNode1", "opacity", "0");
      dojo.style("basicNode2", "height", "0px");
      dojo.style("basicNode2", "display", "none");
      dojo.fx.chain([
        dojo.fadeIn({node: "basicNode1", duration: 2000}),
        dojo.fx.wipeIn({node: "basicNode2", duration: 2000}),
      ]).play();
   }
   dojo.connect(dijit.byId("basicButton"), "onClick", chainIt);
}
dojo.ready(basicChain);
<button data-dojo-type="dijit.form.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>
Error in the documentation? Can’t find what you are looking for? Let us know!