1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
5 <title>dojox.fx - animation sets to use!</title>
7 <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
8 <script type="text/javascript" src="../_base.js"></script>
9 <style type="text/css">
10 @import "../../../dojo/resources/dojo.css";
11 @import "../../../dijit/themes/dijit.css";
12 @import "../../../dijit/themes/tundra/tundra.css";
13 @import "../../../dijit/tests/css/dijitTests.css";
19 border:2px solid #ededed;
20 width:50px; height:50px;
25 table tr { padding:5px; margin:5px; border:1px solid #ccc; }
28 width:75px; height:75px; float:left;
29 border:1px solid #ededed;
31 background-color:#fee;
33 .two { background-color:#c7bedd; }
34 .nopad { padding:0 !important;
35 width:100px; height:100px; border:0;
41 <script type="text/javascript">
42 dojo.require("dijit.form.Button");
43 dojo.require("dijit.TitlePane");
45 function basicXfade(){
47 nodes: [dojo.byId('node1'),dojo.byId('node2')],
52 function absoluteXfade(){
54 nodes: ["node3","node4"],
60 function simpleLoop(){
61 dojo.byId('button').disabled = "disabled";
62 _anim = dojox.fx.crossFade({
63 nodes: ["node5","node6"],
66 dojo.connect(_anim,"onEnd","simpleLoop");
69 function stopLoop(){ _anim.stop(); }
71 function buttonExample(){
74 // FIXME: fails in ie6?!?
75 dijit.byId('node7').domNode,
76 dijit.byId('node8').domNode
82 dojo.addOnLoad(function(){
83 // this is a hack to make nodes with class="hidden" hidden
84 // because ie6 is a horrible wretched beast
85 dojo.query(".hidden").forEach(function(node){
86 dojo.style(node,"opacity","0");
95 <h1 class="testTitle">dojox.fx.crossFade test</h1>
98 <h3>a simple demonstration of two nodes fading simultaneously</h3>
100 <input type="button" onclick="basicXfade()" value="run" />
101 <div style="padding:20px">
102 <div id="node1" style="display:inline;" class="box hidden">box1</div>
103 <div id="node2" class="box">box2</div>
105 <br style="clear:both">
108 <h3>two nodes with position:relative in a container with position:absolute, crossfading together.</h3>
109 <input type="button" onclick="absoluteXfade()" value="run" />
111 <div style="width:100px; height:100px; position:relative; border:1px solid #666; ">
112 <div id="node3" style="position:absolute; top:0; left:0;" class="box nopad hidden">box one</div>
113 <div id="node4" style="position:absolute; top:0; left:0;" class="box two nopad">box two</div>
115 <br style="clear:both">
118 <h3>simple looping crossfade</h3>
119 <input type="button" onclick="simpleLoop()" value="run" id="button" />
121 <div style="padding:20px;">
122 <div id="node5" class="box nopad">box one</div>
123 <div id="node6" class="box two nopad hidden">box two</div>
125 <br style="clear:both">
128 <!-- FIXME: acting oddly, only in IE though
129 <h3>An example of cross-fading a dijit.form.Button</h3>
130 <input type="button" onclick="buttonExample()" value="run" id="button" />
132 <div style="position:relative;">
133 <div dojoType="dijit.TitlePane" id="node7"
134 style="position:absolute; top:0; left:0;">Lorem content two</div>
135 <div dojoTYpe="dijit.TitlePane" id="node8" class="hidden"
136 style="position:absolute; top:0; left:0;">Lorem content one</div>
138 <br style="clear:both;">
142 <h3>that's all, folks...</h3>