dojo.NodeList-fx

Contents

• dojo.NodeList-fx
  • API

This module incorporates dojo.fx functionality into dojo.query by extending the dojo.NodeList Class.

API

anim:Animate one or more CSS properties for all nodes in this list. The returned animation object will already be playing when it is returned. See the docs for dojo.anim for full details. fadeIn:Fade in all elements of this NodeList via dojo.fadeIn fadeOut:Fade out all elements of this NodeList via dojo.fadeOut slideTo:Slide all elements of the node list to the specified place via dojo.fx.slideTo wipeIn:Wipe in all elements of this NodeList via dojo.fx.wipeIn wipeOut:Wipe out all elements of this NodeList via dojo.fx.wipeOut animateProperty:  Animate all elements of this NodeList across the properties specified. Syntax is identical to dojo.animateProperty

Example

The first most important thing to do is require the module into your page:

// [ Dojo 1.6 and earlier ]
dojo.require("dojo.NodeList-fx");
// [ Dojo 1.7 AMD ]
require(["dojo/NodeList-fx"], function(nodeListFx){
  // your codes here
});

// [ Dojo 1.6 and earlier ] dojo.require("dojo.NodeList-fx"); // [ Dojo 1.7 AMD ] require(["dojo/NodeList-fx"], function(nodeListFx){ // your codes here });

To use your newly created functions in NodeList, issue a dojo.query() call:

<button id="fadebutton">Fade Them Out</button>
<div id="fadebuttontarget">
   <li class="thinger">Item One</li>
   <li class="thinger">Item Two</li>
</div>

<button id="fadebutton">Fade Them Out</button> <div id="fadebuttontarget"> <li class="thinger">Item One</li> <li class="thinger">Item Two</li> </div>

dojo.require("dojo.NodeList-fx");
dojo.ready(function(){
    dojo.query("#fadebutton").onclick(function(){
        dojo.query("#fadebuttontarget li").fadeOut().play();
    });
});

dojo.require("dojo.NodeList-fx"); dojo.ready(function(){ dojo.query("#fadebutton").onclick(function(){ dojo.query("#fadebuttontarget li").fadeOut().play(); }); });

The most important thing to note is NodeList <dojo/NodeList> animations return an instance of a dojo.Animation, the foundation for all Dojo FX. This prevents further chaining, as you have to explicitly call .play() on the returned animation. New Dojo 1.4 introduced a way to allow continued chaining with the caveat you cannot obtain a reference to the animations after they have begun. Simply pass the auto parameter.

// [ Dojo 1.6 and earlier ]

dojo.require("dojo.NodeList-fx");
dojo.ready(function(){
     dojo.query("li.evens")
         .fadeOut({
            duration:1000,
            onEnd: function(){ ... },
            // begin playing immediately, and return the nodeList for further iteration
            auto:true
         })
         .onclick(doSomething)
     ;
});

dojo.require("dojo.NodeList-fx"); dojo.ready(function(){ dojo.query("li.evens") .fadeOut({ duration:1000, onEnd: function(){ ... }, // begin playing immediately, and return the nodeList for further iteration auto:true }) .onclick(doSomething) ; });

[ Dojo 1.7 AMD ]

require(["dojo/ready",
  "dojo/query",
  "dojo/NodeList-fx"], function(ready, query, nodeListFx){
    ready(function(){
      query("li.evens")
        .fadeOut({
          duration:1000,
          onEnd: function(){ ... },
          // begin playing immediately, and return the nodeList for further iteration
          auto:true
        })
        .onclick(doSomething);
    };
});

require(["dojo/ready", "dojo/query", "dojo/NodeList-fx"], function(ready, query, nodeListFx){ ready(function(){ query("li.evens") .fadeOut({ duration:1000, onEnd: function(){ ... }, // begin playing immediately, and return the nodeList for further iteration auto:true }) .onclick(doSomething); }; });

The parameters you can specify to each animation provided are identical to their dojo.fx counterparts, omitting the node: parameter, as each node in the NodeList is passed for you.

There are more NodeList animations provided by the dojox.fx.ext-dojo.NodeList module, in the dojox.fx project.

Table of Contents

• dojo.NodeList-fx
  • API
    • Example