1 if(!dojo._hasResource["dojo.NodeList-fx"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
2 dojo._hasResource["dojo.NodeList-fx"] = true;
3 dojo.provide("dojo.NodeList-fx");
4 dojo.require("dojo.fx");
7 dojo["NodeList-fx"] = {
8 // summary: Adds dojo.fx animation support to dojo.query()
12 dojo.extend(dojo.NodeList, {
13 _anim: function(obj, method, args){
15 return dojo.fx.combine(
16 this.map(function(item){
17 var tmpArgs = { node: item };
18 dojo.mixin(tmpArgs, args);
19 return obj[method](tmpArgs);
24 wipeIn: function(args){
26 // wipe in all elements of this NodeList. Returns an instance of dojo._Animation
28 // Fade in all tables with class "blah":
29 // | dojo.query("table.blah").wipeIn().play();
30 return this._anim(dojo.fx, "wipeIn", args); // dojo._Animation
33 wipeOut: function(args){
35 // wipe out all elements of this NodeList. Returns an instance of dojo._Animation
37 // Wipe out all tables with class "blah":
38 // | dojo.query("table.blah").wipeOut().play();
39 return this._anim(dojo.fx, "wipeOut", args); // dojo._Animation
42 slideTo: function(args){
44 // slide all elements of the node list to the specified place.
45 // Returns an instance of dojo._Animation
47 // | Move all tables with class "blah" to 300/300:
48 // | dojo.query("table.blah").slideTo({
52 return this._anim(dojo.fx, "slideTo", args); // dojo._Animation
56 fadeIn: function(args){
58 // fade in all elements of this NodeList. Returns an instance of dojo._Animation
60 // Fade in all tables with class "blah":
61 // | dojo.query("table.blah").fadeIn().play();
62 return this._anim(dojo, "fadeIn", args); // dojo._Animation
65 fadeOut: function(args){
67 // fade out all elements of this NodeList. Returns an instance of dojo._Animation
69 // Fade out all elements with class "zork":
70 // | dojo.query(".zork").fadeOut().play();
72 // Fade them on a delay and do something at the end:
73 // | var fo = dojo.query(".zork").fadeOut();
74 // | dojo.connect(fo, "onEnd", function(){ /*...*/ });
76 return this._anim(dojo, "fadeOut", args); // dojo._Animation
79 animateProperty: function(args){
81 // see dojo.animateProperty(). Animate all elements of this
82 // NodeList across the properties specified.
84 // | dojo.query(".zork").animateProperty({
87 // | color: { start: "black", end: "white" },
88 // | left: { end: 300 }
91 return this._anim(dojo, "animateProperty", args); // dojo._Animation
94 anim: function( /*Object*/ properties,
95 /*Integer?*/ duration,
100 // Animate one or more CSS properties for all nodes in this list.
101 // The returned animation object will already be playing when it
102 // is returned. See the docs for `dojo.anim` for full details.
103 // properties: Object
104 // the properties to animate
105 // duration: Integer?
106 // Optional. The time to run the animations for
108 // Optional. The easing function to use.
110 // A function to be called when the animation ends
112 // how long to delay playing the returned animation
114 // Another way to fade out:
115 // | dojo.query(".thinger").anim({ opacity: 0 });
117 // animate all elements with the "thigner" class to a width of 500
118 // pixels over half a second
119 // | dojo.query(".thinger").anim({ width: 500 }, 700);
120 var canim = dojo.fx.combine(
121 this.map(function(item){
122 return dojo.animateProperty({
124 properties: properties,
125 duration: duration||350,
131 dojo.connect(canim, "onEnd", onEnd);
133 return canim.play(delay||0); // dojo._Animation