dojo.fx.combine

Status:Draft
Version:1.0
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
Available: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

<script>
  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.addOnLoad(basicChain);
</script>
<button dojoType="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!