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>